Question

假设为<tr>设置了onclick处理程序，是否可以针对某个<td>禁用/覆盖它？

<tr onclick='somefunction()'> <td> </td>  ... <td> </td>  ... <td> </td>  </tr>

当然，我可以单独为每个<td>设置它，或者将td的名称传递给该函数，并根据此名称决定做什么，但似乎应该更简单一些溶液

Answer 1

在somefunction中，您可以检查cellIndex的{{1}}，如果点击了不可点击的单元格，则提前返回。像这样：

td

要使用内联处理程序，您必须传递事件对象：

function somefunction (e) {
    if (e.target.cellIndex === 1) {return;}
    /* Do something, the td is clickable */
}

A live demo at jsFiddle

如果你在单元格中有元素，事情就会变得复杂一些。在这种情况下，您必须找到<tr onclick='somefunction(event)'>父元素，如下所示：

td

A live demo at jsFiddle

编辑2018 在2018年，元素具有function somefunction (e) { var target = e.target; // Cache the target element while (target) { // Iterate through elements if (target.tagName === 'TD') { // TD found, stop iteration break; } target = target.parentElement; // Set target as a parent element of the current element } if (target === null) {return;} // Check that we really have a TD if (target.cellIndex === 1) {return;} // A non-clickable cell clicked : }方法，因此不需要上面的循环，closest()将确保使用target = e.target.closest('td')。

一种非常简单的方法是使用CSS td，但不幸的是，在IE＆lt; 11中，这种特殊情况下的~~中的~~不起作用，但在Chrome中效果很好和IE11。如果单元格恰好包含交互元素，那么防止指针事件也会很糟糕。~~~~

~~A live demo at jsFiddle~~

Answer 2

我发现最简单的方法是使用<td>标签中的onclick = event.stopPropagation（）停止将事件传递给父html。

所以<td class=whatever onclick=event.stopPropagation()>cell data<td>

Answer 3

编辑： -

尝试这样的事情。

HTML：

<tr id="row">
    <td> </td> <!--onclick should work here-->
    ...
    <td class="noChange"> </td> <!--onclick should not work here-->
    ...
    <td> </td> <!--onclick should work here-->
</tr>

JavaScript的：

window.onload = function() {
    var row = document.getElementById("row");

    for (i=0; i<row.childNodes.length; i++) {
        if (row.childNodes[i].class != "noChange") {
            row.childNodes[i].onclick="doStuff()";
        }
    }
}

Answer 4

<html>
<body>
<table border="1">
<tr onclick='somefunction(this)'> 
    <td><input type="text"></td> <!--onclick should work here--> ... 
    <td><input type="text"></td> <!--onclick should not work here--> ... 
    <td><input type="text"></td> <!--onclick should work here-->
</tr>
</table>
<script>
function somefunction(element) {
  var td = element.children;
  console.log(td);
  var inputObj = td[1].children;
  console.log(inputObj[0]);
  inputObj[0].disabled = true;
}
</script>

</body>
</html>

children属性'element.children'返回元素的子元素列表，作为HTMLCollection对象。享受：）

onclick设置为如何禁用一个

4 个答案: