在click事件中检索没有父项的div

我正在编写一个应用程序，我需要返回一个我点击的元素类。

问题是，一旦我点击一个元素，我也会得到它的所有父类。

我用来检索类名的代码：

$('div').click(function () { console.log($(this).attr("class")); }); 

这是一个元素的样本：

 
 
 Bla bla bla 
  

一旦我点击.child div ，它就会返回.child和.parent类名。

我想应该有一个简单的方法来解决这个问题，但经过几个小时的研究后我找不到任何东西。

Answer 1

您需要阻止事件冒泡到父元素，使用return false;

 $('div').click(function (e) { console.log($(this).attr("class")); return false; // or e.stopPropagation(); }); 

从jQuery事件处理程序中 return false e.preventDefault与在传递的jQuery.Event对象上调用e.preventDefault和e.stopPropagation相同。 ……..

阅读这个优秀的答案获取更多信息。

使用

， e.stopPropagation()之间存在差异，并return false因为

没有像或< button>这样的默认点击事件。

Answer 2

不要绑定到页面上的所有

元素。 那效率很低。

代替…

• 使用.on()使用事件委托，将一个处理程序绑定到body

• 有'div'的委托选择器测试

• 然后从被点击的内容中获取.className

---

 $('body').on('click', 'div', function(e) { console.log(this.className); e.stopPropagation(); }); 

所以现在你有一个处理程序为所有

元素工作。

如果您使用的是旧版本的jQuery，请使用.delegate()而不是.on() 。

 $('body').delegate('div', 'click', function(e) { console.log(this.className); e.stopPropagation(); }); 

---

编辑：更新为使用this而不是@gdoron建议的e.target 。

Answer 3

您需要阻止点击“冒泡”到其父级。

在本机Javascript中，您可以调用ev.stopPropagation()但在jQuery处理程序中，您只需在事件处理程序中return false ，然后jQuery执行其余操作。

请参阅JSFiddle以获取演示。

Answer 4

您向所有DIV元素添加了click事件，但您只需要一个。

 $('div.child').click(function () { console.log($(this).attr("class")); }); 

Answer 5

尝试使用return false

 $('div').click(function() { console.log($(this).attr("class")); return false; }); 

Answer 6

您可以使用event.stopPropagation();停止传播event.stopPropagation();

 $('div').click(function (e) { console.log($(this).attr("class")); e.stopPropagation(); }); 

Answer 7

这是因为你已经包含了元素。 并且函数执行两次。 一旦进入.child，一次进入.parent尝试，

 
BLA BLA
 
bla bla bla 

并看到差异。