onclick 设置为 <tr> 如何禁用一个 <td>

Question

假设为 <tr> 设置了 onclick 处理程序，是否可以 disable/overwrite 它用于一个特定的 <td>？

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

当然我可以给每个<td>单独设置或者把一个td的名字传给函数然后根据这个名字决定做什么，不过好像应该有更简单的解决方案。

Answer 1

在 somefunction 中，您可以检查 td 的 cellIndex，如果单击了不可单击的单元格，则可以尽早检查 return。像这样：

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

要使用内联处理程序进行这项工作，您必须传递事件对象：

<tr onclick='somefunction(event)'>

A live demo at jsFiddle.

如果单元格中有元素，事情会变得有点复杂。在这种情况下，您必须找到一个 td 父元素，如下所示：

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

A live demo at jsFiddle.

编辑 2018 2018 元素有 closest() 方法，因此不需要上面的循环，target = e.target.closest('td') 将确保使用 td。

一种非常简单的方法是使用 CSS pointer-events: none，但不幸的是，在这种特殊情况下，~~在 FF 中~~ 在 IE 中这不起作用< 11，尽管在 Chrome 和 IE11 中运行良好。如果单元格恰好包含交互式元素，那么防止指针事件也会很糟糕。

A live demo at jsFiddle.

Answer 2

编辑：-

尝试这样的事情。

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 3

<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' returns 元素的子元素列表，作为 HTMLCollection 对象。享受 :)

Answer 4

我发现最简单的方法是使用 <td> 标记中的 onclick=event.stopPropagation() 来阻止事件传递给父 html。

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

onclick 设置为 <tr> 如何禁用一个 <td>

onclick is set for <tr> How to disable for one <td>

javascript

onclick