Javascript ondblclick

Question

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

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

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

我理解为 "When you click on a cell you get the alert message "你点击了我！”但由于某些原因它不起作用。

可变单元格存在（由控制台检查）请大家帮忙解决问题！[=12=]

Answer 1

getElementsByTagName returns 一个 HTML 集合。您不能将事件添加到实时 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>

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

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>

Answer 2

var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    cells[i].ondblclick = function() {
       alert('You clicked me!');
    };
}

Javascript ondblclick

Javascript ondbclick

javascript

events