javascript - 触发 DIV 容器 onclick 而不是在内容中

Question

我想在 DIV 容器上添加 onclick 事件。

<div id="click_div" onclick="alert('test');" style="cursor: pointer">
     <td id="leftContainer" class="form-basic">
     ...
     </td>
</div>    

现在我有了这个代码，<td>里面有这个 css 属性:pointer-events: none;

所以我不能在上面添加onclick事件，但我想在外部<div>上添加这个click事件，所以我会在任何地方点击 <td>空间事件将被触发。我在这里发布的代码不起作用，你有什么想法吗？

如果您有任何其他想法，请允许我在 <td> 中单击使用 no-events 属性就可以了(我无法更改 <td> css 和属性)

Answer 1

为什么你有一个 div 包装你的 <td>元素？我认为这是无效的 HTML 标记，并且在不同的浏览器上可能会有不可预知的行为。

来自MSDN page on the td tag

Permitted parents: A <tr> element.

根据基于以下代码片段的一些实验，如果您的 <td>在div里面里面tr ，然后 chrome 重构它以移动 div表格外的元素。

点击事件不起作用，因为 div 不在 td 附近但在 table 外面的某个地方。

同样，您看不到正在设置的背景颜色，因为 div 的高度可能为零(里面什么都没有，td 在表格里面，div 现在在外面)。设置padding:20px或 height div 上的值以查看它实际出现的位置。 (如果你使用的浏览器有一个，你也可以在开发工具中检查它)

td {
  pointer-events: none;
  background: green;
}

div {
  background: red;
  padding: 20px;
}

<table>
  <tr>
    <div onclick="alert('Hello')" class="container">
      <td class="inner">
        test
      </td>
    </div>
  </tr>
</table>