Question

我在子元素上有一个事件侦听器，但我想获取当前元素。

示例代码：

$(".video").on("click", "img", function(e) {
  console.log(this);
  console.log(e.currentTarget);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <img src="video_1.png" />
  <span>Video 1</span>
</div>

<div class="video">
 <img src="video_2.png" />
 <span>Video 2</span>
</div>

在此示例中，我想获取.video元素，而不是img。最好的方法是什么？

我知道$(this).parent()和$(this).closest(".video")，但我正在寻找更好的方法。实际情况不仅是父母，closest搜索将花费时间。

Answer 1

要实现此目的，您可以使用事件的delegateTarget property：

$(".video").on("click", "img", function(e) {
  console.log(this);
  console.log(e.delegateTarget);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <img src="video_1.png" />
  <span>Video 1</span>
</div>

<div class="video">
  <img src="video_2.png" />
  <span>Video 2</span>
</div>

Answer 2

使用父母（[选择器]）；

$(this).parents(".video")

Answer 3

除了上述答案外，还可以使用“最近”方法

   <input type="text" placeholder="Test" name="username" required/>

当子事件发生时如何获取当前元素？

3 个答案: