Question

我有这个HTML代码：

<td class="myclass">
    <span>
        <span>xxxx</span>
    </span>
    <span>xxxx</span>
    <span>xxxx</span>
</td>

我将click事件附加到具有类“myclass”的元素，并将函数作为回调传递。在函数中，我在event.target中收到任何元素，但我想要的元素是td。 ¿为了在目标或事件中始终获得td，我可以避免冒泡吗？

非常感谢

Answer 1

在handler-function

中使用this上下文

$('.myclass').on('click', function() {
  console.log(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="myclass">
      <span>
        <span>xxxx</span>
      </span>
      <span>xxxx</span>
      <span>xxxx</span>
    </td>
  </tr>
</table>

或 e.currentTarget

在事件遍历DOM时标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

$('.myclass').on('click', function(e) {
  console.log(e.currentTarget);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="myclass">
      <span>
        <span>xxxx</span>
      </span>
      <span>xxxx</span>
      <span>xxxx</span>
    </td>
  </tr>
</table>

避免在嵌套元素中冒泡

1 个答案: