javascript - 单击子元素时防止包含元素的执行事件

Question

• 我所有的元素都是绝对定位的
• item2 包含在 item1 中
• 当我点击 item2 时，默认行为是先点击 item2，然后点击 item1
• 当我单击 item2 时，我可以以某种方式阻止对 item1 执行的任何操作吗？

请点击 fiddle 中的 item2

我的小提琴：

http://jsfiddle.net/z9Unk/59/

HTML

<div class="item1">
  item1
</div>
<div class="item2">
    item2
</div>
<div class="item3">
    item3
</div>

CSS：

item1 {
    position:absolute;
    width:150px;
    height:150px;
    background-color:red;
    top:5%;
}

.item3, .item2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    top:8%;
    left:1%;
    display:none;
}

.item3 {
    top:18%;
}

JS：

var item1 = $(".item1");
var item2 = $(".item2");
var item3 = $(".item3");

item1.hover(
    function() {
      item2.show();
      item3.show();
    },
    function() {
      item2.hide();
      item3.hide();
    }

);

item2.hover(
    function() {
      item3.hide();
    },
    function() {
    }

);

item2.click(
    function() {
        alert("Perform some function");
    }
);

item1.click(
    function() {
        alert("Perform item1 function");
    }
);

Answer 1

您可以防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

DOM 3 级事件：stopPropagation

IE6-8 你可以添加return false事件处理程序或window.event.cancelBubble = true

如果你使用jquery，可以event.stopPropagation在所有浏览器中使用

Answer 2

只需返回 false：

item2.click(
    function() {
        alert("Perform some function");
        return false;
    }
);

item1.click(
    function() {
        alert("Perform item1 function");
        return false;
    }
);

阅读本文：什么是“返回错误；” 做？