禁用點擊事件

Question

我有一個表行，它指定一個onclick事件，如下所示。

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

並且表行中有許多表數據，並且還有多行。

這里我的要求是僅對一個表數據禁用此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>

並且需要在第一個<td>上禁用onclick事件，這是一個復選框 。

Answer 1

您可以指定具有以下規則的類：

.off { pointer-events: none; }

任何使其無法點擊的元素。

使用類在需要時啟用單擊：

.on { pointer-events: auto; }

該片段通過輸入數字1到4然后關閉或打開 來演示此信息

 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);

 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; }

 <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>

Answer 2

您可以使用onclick="return false"來禁用點擊次數，使用oncontextmenu="return false"來禁用右鍵點擊。

例如。

<table onclick="return false" oncontextmenu="return false">
  <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>

禁用點擊事件

問題描述

2 個解決方案

解決方案1
6 已采納 2015-12-08 02:00:40

解決方案2
2 2015-12-08 01:53:29

禁用點擊事件

問題描述

2 個解決方案

解決方案1 6 已采納 2015-12-08 02:00:40

解決方案2 2 2015-12-08 01:53:29

解決方案1
6 已采納 2015-12-08 02:00:40

解決方案2
2 2015-12-08 01:53:29