jquery - 如何在 JQuery 中仅获取单击的元素

Question

如何在 JQuery 中仅获取单击的元素

假设以下

<html>
  <body>
    <div>
      <h1>headding</h1>
    </div>
    <a>link</a>
  </body>
</html>

$("*").click(function(e){
   e.preventDefault();
   alert($(this)[0].tagName);
});

我需要点击h1警报节目h1 和点击a警报节目a等。

问题是当我单击任何元素时，代码会循环显示被单击元素的所有父元素的名称。但我只需要第一个点击的元素。任何帮助

score 11 · Accepted Answer

使用stopPropagation()所以事件不会冒泡

$("*").click(function(e){
   e.preventDefault();
   e.stopPropagation();
   alert($(this)[0].tagName);
});

小提琴

score 4 · Accepted Answer

最后你需要 areturn false来防止冒泡。

$("*").click(function (e) {
    e.preventDefault();
    alert($(this)[0].tagName);
    return false;
});

检查这个小提琴

score 4 · Accepted Answer

您遇到了事件传播。该事件源自您单击的元素，但随后沿 DOM 树向上传播到根（文档）。您可以使用该stopPropagation方法来防止这种情况，也可以使用return false事件处理函数（以防止默认行为和停止传播）：

 $("*").click(function(e){
   e.preventDefault();
   e.stopPropagation();
   alert(this.tagName);
});

或者

$("*").click(function(e){
   alert(this.tagName);
   return false; //both prevents default and stops propagation
});

顺便说一句，$(this)[0]是胡说八道。您正在创建一个包含的类数组对象this，然后将第一个元素 ( this) 取出，因此无需进行函数调用和数组访问即可获得您已经直接引用的内容。零增益的纯开销，直接使用this即可。

score 1 · Accepted Answer

只需将您的 jQuery 选择器更改为仅将单击事件添加到h1and a：

$("h1,a").click(function(e){
   e.preventDefault();
   alert($(this)[0].tagName);
});

jquery - 如何在 JQuery 中仅获取单击的元素

4 回答 4

Related

Reference