触发 DIV 容器 onclick 而不是在内容内答案

【问题标题】：Trigger DIV container onclick instead inside content触发 DIV 容器 onclick 而不是在内容内
【发布时间】：2018-11-26 07:12:13
【问题描述】：

我想在 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> 上添加这个点击事件，所以无论我在哪里点击<td> 空间都会触发该事件。我在这里发布的代码不起作用，您有什么想法吗？

如果您有任何其他想法可以让我在带有 no-events 属性的 <td> 内单击就可以了（我无法更改 <td> css 和属性）

【问题讨论】：

在div上添加css属性pointer-events: all;
它不起作用并且光标仍然不是内的指针
如果我应用背景颜色：红色；到 div 我看不到那个颜色，这意味着 div 不在正确的位置？
您不能将 td 放在 div 中，q td 是表格中的一个单元格，应该嵌套在作为表格一部分的 tr 元素中。你为什么不摆脱 div 并将参数移动到 td ？

【解决方案1】：

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

来自MSDN page on the td tag

允许的父母：<tr> 元素。

根据下面基于 sn-p 的一些实验，如果您的 <td> 在 div 内 tr 内，那么 chrome 会对其进行重构以将 div 元素移到表格外。

点击事件不起作用，因为 div 不在 td 附近，而是在表格之外的某个地方。

同样，您看不到设置的背景颜色，因为 div 的高度可能为零（它内部没有任何内容，td 在表格内部，而 div 现在在外部）。在 div 上设置 padding:20px 或 height 值以查看它实际出现的位置。（如果您使用的浏览器有开发工具，您也可以在开发工具中检查它）

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>

【讨论】：

是的，这是怎么回事，div 仍然在之外，如何将 td 包裹在 div 中？
我认为将 td 包装在 div 中的 HTML 不是有效的。它的父元素必须是 tr 元素。您也可以直接在tr 元素上设置侦听器（如果这是一个选项）- 这实际上取决于您要做什么- 为什么需要div？你可以没有它吗？等
我不需要 div，但我找不到不删除指向的无操作指针的另一种方法，但同时可以在该视图空间中单击以提供一个动作（在我有一些不必触发的输入框广告按钮，这就是为什么有 pointer-events:none ）我的想法是用 onclick 属性包装在一个 div 中
我明白了。有几种方法可以做到这一点 1) 将 CSS pointer-events:none 专门定位到您希望点击停止工作的 td 的子级。或 2) 在 td 内有一个绝对定位的透明 div 元素，其高度和宽度设置为 100%。添加一个点击监听器应该可以工作。但这并不真正在这个问题的范围内。一点点的实验应该会让你通过。如果尝试后仍然无效，请随时提出另一个问题:)

【解决方案2】：

首先，把<div>放在一个表里面是不正确的。

您可以在 javascript 中捕获您的 <td> 并循环它们以添加 onclick 事件。请记住 document.getElementsByTagName 返回一个 NodeList，因此您需要循环这些元素以添加事件。

如果您无法捕捉/不想捕捉 - 例如您的 <td>，您可以在桌子前抓取 <table> 或全局 <div>，您将能够在任何地方单击并触发事件。

function Ping(){
    alert("Pong!");
}

function tdClick () {
  var myTags = document.getElementsByTagName("td");
  for (var i=0;i<myTags.length;i++){
      myTags[i].addEventListener('click', Ping);
  }
}


function tableClick() {
  var myTag = document.getElementById("my-table");
  myTag.addEventListener('click', Ping);
}

// call tdClick() or tableClick()
tdClick();

table {background-color: red; padding: 40px;}
table tr td {cursor: pointer; padding: 20px;border: 1px solid black;}

<div>
  <table id="my-table">
    <tr>
    <!-- A division here is NOT correct -->
      <td>
        <!-- A division here is correct -->
        Text here
      </td>
      <td>
        <!-- A division here is correct -->
        Text there
      </td>
    <tr>
  </table>
</div>

【讨论】：