Question

我有一个html表，我尝试使用javascript来触发事件，只要一行失去焦点但是＆＃34;模糊＆＃34;事件似乎是正确的，因为什么都没有解雇：

（我正在做的事情的简单例子）

<tr class="tableRow">
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
</tr>

和我＆＃34; m使用以下内容：

var rows = document.getElementsByClassName("tableRow");

for(i = 0; i < rows.length; i++) {
    rows[i].addEventListener("blur", function(){console.log("row left!");});
}

但是在控制台中没有任何东西可用 - 我是否误解了事件/ DOM结构？

Answer 1

行可能永远不会获得焦点，单元就可以了。

不幸的是，blur没有冒泡。但是如果您在每个单元格上挂钩blur，然后单击其中一个单元格以使其聚焦，然后单击其他内容以将焦点移开，它应该可以工作：

var cells = document.querySelectorAll(".tableRow td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("blur", handler);
}

function handler() {
  console.log("row left!");
}

<p>Click a cell below to give it focus</p>
<table>
  <tbody>
    <tr class="tableRow">
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
    </tr>
  </tbody>
</table>
<p>Click here to take focus away</p>

或者，使用focusout，这最初是一个仅限IE的事件，但已经添加到Chrome中，但据我所知，不是，Firefox：

document.querySelector("table").addEventListener("focusout", function() {
  console.log("Left!");
});

<p>Click a cell below to give it focus</p>
<table>
  <tbody>
    <tr class="tableRow">
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
    </tr>
  </tbody>
</table>
<p>Click here to take focus away</p>

jQuery用户的旁注：jQuery使focus和blur冒泡，即使它们不是本机的，所以你可以使用jQuery来使用事件委托。

当表行丢失焦点时运行代码的JavaScript

1 个答案: