获取焦点时的父元素 ID答案

【问题标题】：Retrieve parent element ID on focus out获取焦点时的父元素 ID
【发布时间】：2017-12-18 10:02:50
【问题描述】：

每当用户从该 TR 中移除焦点时，我都会尝试检索该 TR 元素的 ID。触发事件很容易，但我不知道如何最好地检索 ID

$(".row-identifying-class").focusout(function (e) {
    var rowID = e.target.id; // Returns the ID of the TD/input/label etc the user last clicked on
    alert(e.target);
})

问题似乎是，尽管每当我从 TR 中移除焦点时都会触发上述函数，但该事件实际上是由子元素（例如 TD、输入框、按钮等）触发的，而不是父元素。

有什么方法可以检索原始 TR，而不必追溯每个对象的父对象，直到我遇到一个 TR 元素？也许在创建函数时直接传入 ID？

【问题讨论】：

标签： javascript jquery html dom html-table

【解决方案1】：

您是正确的，e.target 将引用引发新事件的元素，该事件导致focusout 在tr 上触发。

改为使用 currentTarget 属性，因为它会指向事件绑定元素，或者更简单地说只是 this.id：

$(".row-identifying-class").focusout(function(e) {
  console.log(e.currentTarget.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="row-identifying-class" id="tr">
    <td>
      <input type="text" value="cause a focusout on me..." />
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

使用this 或e.currentTarget 代替e.target

$(".row-identifying-class").focusout(function (e) {
    var rowID = this.id; 
    alert(rowID);
});

jQuery 事件处理程序中的this 将是发生事件的匹配选择器的元素实例

【讨论】：