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等

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

Answer 1

使用stopPropagation()因此事件不会冒泡

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

FIDDLE

Answer 2

最后需要return false以防止冒泡。

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

选中此fiddle

Answer 3

您正在遇到事件传播。事件源自您单击的元素，但随后在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。

Answer 4

只需将您的jQuery选择器更改为仅向h1和a添加点击事件：

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

如何只获取JQuery中单击的元素

4 个答案: