1

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 再次处于活动状态，等等。

有什么建议么？

4

2 回答 2

5

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

为确保仅在单击当前元素时执行代码并忽略冒泡事件，请更改您的事件以检查当前元素是否是您使用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 或更高版本开始可以使用它来代替 live
于 2012-10-09T23:35:40.573 回答
0

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

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

只有当这对您的特殊情况不起作用时，您才应该使用比较事件目标的解决方案。

于 2012-10-09T23:44:31.193 回答