Question

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

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

现在我有了这段代码，<td>内部具有以下CSS属性：指针事件：无；

因此，我无法在其上添加onclick事件，但我希望此click事件在外部<div>上，所以我到处都会单击<td>空间，将触发该事件。我在这里发布的代码无法正常工作，您有什么想法吗？

如果您还有其他想法可以允许我在没有事件属性的<td>内单击（我无法更改<td>的CSS和属性）

Answer 1

为什么您的div包裹了<td>元素？我认为这是无效的HTML标记，并且在不同的浏览器上可能会有无法预测的行为。

从MSDN page on the td tag

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

根据以下代码段进行的一些实验，如果您的<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>

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

触发DIV容器onclick而不是内部内容

2 个答案: