Question

HTML

<div class="mybox" id="element1">
    <div class="mybox" id="element2">
        <div class="mybox" id="element3">
        </div>
        <div class="mybox" id="element4">
        </div>
    </div>
</div>

JS

$(".mybox").live("mouseup", function(event) {
   alert($(this).attr("id"));
});

好的，所以我的问题是如何只获得活跃的div（我点击的那个，而不是所有的父母）。当我点击element2时，我得到了element2＆amp;然后“element1”激活，当我点击element3时，我得到了element2＆amp;然后element1再次激活，等等。

有什么建议吗？

Answer 1

您看到所有这些警报的原因是由于事件冒泡。每次单击元素时，事件都会在链中传播。将执行沿途附加了点击事件的每个元素。

为确保您仅在单击当前元素时执行代码并忽略冒泡事件，请更改您的事件以检查当前元素是否是您使用event.target单击的元素，然后才执行预期代码：

$(".mybox").live("mouseup", function(event) {
    if(event.target === this){
       alert($(this).attr("id"));
    }
});

DEMO - 使用直播

如果您使用的是jQuery 1.7或更高版本{@ 1}}已被弃用，on()现在是附加和删除事件的首选方式。

要使用live()，您可以执行此操作：

on()

DEMO - 使用on（）

使用(document).on("mouseup", ".mybox", function(event) { if (event.target === this) { alert($(this).attr("id")); } });时，指定最接近的静态元素，在上面的示例中，该元素是文档。但是，如果你有一个更接近静态的元素，你应该使用它而不是on()。

我已在答案中链接了所有必需的文档，但再次总结。

资源

live() - 包含有关弃用原因的所有详细信息
on() - 自1.7以来首选。
delegate() - 自1.4.2或更高版本起可用于代替实时

Answer 2

正如弗朗索瓦所写，这种效应被称为“事件冒泡”。但是jquery有自己的功能来防止事件上升：stopPropagation

$("p").click(function(event){
  event.stopPropagation();
  // do something
});

只有在您的特殊情况下无效时，才应使用比较事件目标的解决方案。

jQuery Live + mouseup函数，只获取子元素活动

2 个答案:

DEMO - 使用直播

DEMO - 使用on（）

资源