找回没有父母的div点击事件

我正在编写一个应用程序，我需要返回一个我点击过的元素的类。找回没有父母的div点击事件

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

代码我用来检索类名：

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

这是元素的一个样本：

<div class="parent"> 
    <div class="child"> 
     Bla bla bla 
    </div> 
</div>

当我点击一个.child div，它返回我都.child和.parent类名。

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

来源

2012-01-31 Alvydas

只需在'console.log'之后尝试'返回false;'点击功能' - 它在第一次函数调用时执行了事件停止。如果你只想在div.child上应用该函数，只需将第一行改为'$（'div.child'）...' – 2012-01-31 17:41:07

通过'JQuery'，总有一种简单的方法可以解决问题。感谢'JQuery'！ – gdoron 2012-01-31 18:17:35

您需要防止事件冒泡到父元素，一个jQuery的事件处理程序内使用return false;

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

});

return false从有效地一样，呼吁双方e.preventDefault和e.stopPropagation通过jQuery.Event object. ........

阅读this有关更多信息的优秀答案。

随着<div>现在有e.stopPropagation()和return false之间的差别，因为<div>没有默认点击事件像<a>或< button>做。

来源

2012-01-31 17:41:53 gdoron

或者你需要停止通知 – 2012-01-31 17:43:31

@ jplash中的Splash-X返回false会为你做。 – Alnitak 2012-01-31 17:44:42

@ Splash-X。我添加了这个选项，虽然没关系，因为'div'没有'click'的默认事件... – gdoron 2012-01-31 17:48:35

您需要防止点击“冒泡”直至其父项。

在原生Javascript中，您可以调用ev.stopPropagation()，但在jQuery处理程序中，您可以在事件处理程序中仅使用return false，然后jQuery完成剩余的处理。

请参阅JSFiddle进行演示。

来源

2012-01-31 17:41:18 Alnitak

您将点击事件添加到所有DIV元素，但只需要一个。

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

来源

2012-01-31 17:41:36

当父母（而不是孩子）也被点击时，他想要将父母添加到列表中。 – gdoron 2012-01-31 17:52:00

不要绑定到全部<div>页面上的元素。这是非常低效的。

取而代之的是...

使用.on()使用事件代表团，一个处理程序绑定到body
有'div'
代表团选择测试，然后得到被点击的this的.className

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

因此，现在您有一个处理程序正在为所有<div>元素执行工作。

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

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

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

来源

2012-01-31 17:41:58

如果代表的选择器是'div'，它不会只是'this'吗？无论如何，你确定将一个动态代理附加到“body”比将事件绑定到所有div更高效吗？很难去相信。 – gdoron 2012-01-31 18:03:35

@gdoron：如果页面上有许多div应该得到相同的处理程序，那么只需要较少的内存开销即可绑定一个。每次点击都有更多的处理，但点击事件不会像滚动或鼠标移动事件那样经常发生。但是你是对的，我可以使用'this'。出于某种原因，我认为会有嵌套元素的问题，但似乎没有。 – 2012-01-31 18:08:50

无论如何，你有我的+1，但我认为它可能**微**优化... – gdoron 2012-01-31 18:14:41

尝试使用return false

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

来源

2012-01-31 17:43:54

http://jsfiddle.net/f8Fbb/ – 2012-01-31 17:45:31

可以使用event.stopPropagation();

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

来源

2012-01-31 17:44:24

这是因为您已经停止元素传播。并且函数执行两次。一旦.child，一次在.parent 尝试，

<div class="parent">BLA BLA</div> 
<div class="child">bla bla bla</div>

，看到了差距。

来源

2012-01-31 17:53:08 sly

找回没有父母的div点击事件

回答

相关问题