禁用点击事件

Question

禁用点击事件

dav*_*ais 6 html javascript css jquery html5

我有一个表行,它指定一个onclick事件,如下所示.

onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"

Run Code Online (Sandbox Code Playgroud)

并且表行中有许多表数据,并且还有多行.

这里我的要求是仅对一个表数据禁用此onclick事件,但对整个行保持活动状态.

是否有任何禁用只有一个表数据的onclick事件.

编辑

表格如下所示.

<html>
<head>

<script>
function dispStudRequest(val, val1)
{
    document.location.href="/student/Studentdetails.jsp?u_StudentID="+val+"&u_rollnoNumber="+val1;
}
</script>
</head>
<body>

<table>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student1</td>

</tr>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student2</td>

</tr>
</table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

并且首先需要禁用onclick事件,<td>这是一个复选框.

Answer 1

zer*_*0ne 6

您可以指定具有以下规则的类:

.off { pointer-events: none; }

任何使其无法点击的元素.

使用类在需要时启用单击:

.on { pointer-events: auto; }

该片段通过输入数字说明了这一点1 to 4,然后off or on

function toggleTD(pos, state) {
  var anchors = document.querySelectorAll('a');
  var tgt = anchors[pos - 1];
  if (state === 'on') {
    tgt.classList.remove('off');
    tgt.classList.add('on');
  } else {
    tgt.classList.add('off');
    tgt.classList.remove('on');
  }
  return false;
}

var btn = document.getElementById('btn');

btn.addEventListener('click', function(event) {
  event.preventDefault();
  var inp1 = document.getElementById('inp1').value;
  var inp2 = document.getElementById('inp2').value;
  return toggleTD(inp1, inp2);
}, false);

Run Code Online (Sandbox Code Playgroud)

body {
  width: 100vw;
  height: 100vh;
}
table {
  border: 1px solid #000;
  width: 80%;
  height: 50%;
}
td {
  border: 1px solid red;
}
a {
  width: 100%;
  height: 100%;
  font-size: 1em;
  text-align: center;
  padding-top: calc(50% - .5em);
  display: block;
}
.on {
  pointer-events: auto;
  background-color: green;
}
.off {
  pointer-events: none;
  background-color: red;
}
input {
  width: 2em;
  margin-top: 5px;
  padding: 0 3px;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<table>
  <tr>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
  </tr>
</table>
<label>Position</label>
<input id="inp1">
<label>On/Off</label>
<input id="inp2">
<button id="btn">ToggleTD</button>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	1102 次
最近记录：	9 年，9 月前