如何知道哪个子元素被单击

Question

我仍在学习 jquery，我想知道是否有办法检查该.alphabetdiv 内的哪个元素被单击。这是正确的方法吗？$(document).on("click", ".alphabet", function() {  var id = $(this).children().attr('id');  console.log(id); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="alphabet">  <a id="a">a</a>  <a id="b">b</a>  <a id="c">c</a>  <a id="d">d</a></div>

Answer 1

为<a>标签添加点击事件。

$('a').on("click", function() {

  console.log($(this).attr('id'));

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alphabet">

  <a id="a">a</a>

  <a id="b">b</a>

  <a id="c">c</a>

  <a id="d">d</a>

</div>

Answer 2

jQuerychildren()返回选择器的所有子级。在您的上下文中，您将获得所有链接，而不是单击的链接。这是一个演示：

$(document).on("click", ".alphabet", function() {

  let $children = $(this).children();

  $children.each((k, item) => console.log(item.id));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alphabet">

  <a id="a">a</a>

  <a id="b">b</a>

  <a id="c">c</a>

  <a id="d">d</a>

</div>

一种想法是定位<a>标签而不是<div>：

$(document).on("click", ".alphabet a", function() {

  console.log(this.id);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alphabet">

  <a id="a">a</a>

  <a id="b">b</a>

  <a id="c">c</a>

  <a id="d">d</a>

</div>

另一个想法是使用事件目标：

$(document).on("click", ".alphabet", function(e) {

  console.log(e.target.id);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alphabet">

  <a id="a">a</a>

  <a id="b">b</a>

  <a id="c">c</a>

  <a id="d">d</a>

</div>

最后，除非.alphabet元素或其子元素是动态生成的，否则事件委托可能没有必要。您可以将事件处理程序直接绑定到链接元素，如下所示：

$('.alphabet a').on("click", function(e) {

  console.log(this.id);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alphabet">

  <a id="a">a</a>

  <a id="b">b</a>

  <a id="c">c</a>

  <a id="d">d</a>

</div>

Answer 3

不，这是不正确的。您将事件侦听器添加到 main div，因此当您单击此元素时div，无论您单击哪个子元素，事件都会被触发。如果要确定目标，则需要为每个子元素添加侦听器。