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

Question

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

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

我用来检索类名的代码：

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

这是元素的样本：

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

点击.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实际上与调用传递的jQuery.Event object.上的e.preventDefault和e.stopPropagation相同... .....

阅读this优秀答案以获取更多信息。

<div>现在e.stopPropagation()与return false之间存在差异，因为<div>没有<a>或＆lt; {{等默认点击事件1}}做。

Answer 2

不要绑定到页面上所有 <div>元素。那是非常低效的。

，而不是...

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

• 拥有'div'

的委托选择器测试

• 然后从点击的.className获取this

---

$('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();
});

---

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

Answer 3

你需要阻止点击＆＃34;冒泡＆＃34;直到它的父母。

在本机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();

停止传播

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

Answer 7

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

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

看到差异。