Javascript ondblclick

Question

我有一张 table 。我希望它的每个“td”在双击时调用一个事件。所以，

var cell = document.getElementsByTagName('td');

cell.ondblclick = function() {
alert('You clicked me!');
};

我理解它就像“当你点击一个单元格时，你会收到警报消息“你点击了我!”但由于某种原因它不起作用。

var 单元格存在(由控制台检查)请各位大佬帮忙解决一下问题!

Answer 1

getElementsByTagName 返回 HTMLCollection。您无法将事件添加到实时 HTMLCollection。您需要将事件添加到集合的每个元素。

var cell = document.getElementsByTagName('td');
for (var i = 0; i < cell.length; i++) {
  cell[i].ondblclick = function() {
    alert("clicked");
  }
}

<table class="myTable">
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

[在大多数情况下]更好的方法是向父级添加一次单击并使用事件委托(delegate)，而不是向页面添加大量事件。

var myTbody = document.querySelector(".myTable tbody");
myTbody.addEventListener("dblclick", function(evt) {
  var elem = evt.target;
  if (elem.tagName === "TD") {
    alert(elem.textContent);
  }
});

<table class="myTable">
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>