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

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然后"element1"处于活动状态,当我点击element3时,我得到了element2,然后element1再次激活,等等.

有什么建议？

Answer 1

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

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

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

演示 - 使用直播

如果您使用的是jQuery 1.7或更高版本live(),则不推荐使用,而on() 现在是附加和删除事件的首选方式.

为了使用on(),而不是你可以这样做:

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

演示 - 使用on()

使用时,on()请指定最接近的静态元素,在上面的示例中,该元素是文档.但是,如果你有一个更接近的静态元素,你应该使用它而不是document.

我已将所有必需的文档链接到答案中,但再次进行总结.

资源

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