当 table 行失去焦点时 JavaScript 到运行代码

Question

我有一个 html table 并且我正在尝试使用 jJavascript 在一行失去焦点时触发一个事件但是“模糊”事件似乎不正确正在开火：

（我在做什么的快速示例）

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

我正在使用以下内容：

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

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

但控制台中没有出现任何内容 - 我是否误解了 event/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.

当 table 行失去焦点时 JavaScript 到运行代码

JavaScript to run code when table row loses focus

javascript

onblur

dom-events

当 table 行失去焦点时 JavaScript 到 运行 代码

JavaScript to run code when table row loses focus

javascript

onblur

dom-events

当 table 行失去焦点时 JavaScript 到运行代码