Javascript 阻止在单击子元素时包含元素的执行事件 我所有的元素都是绝对定位的 项目2包含在项目1中 当我单击item2时，默认行为是执行单击item2，然后单击item1 当我点击项目2时，我能阻止对项目1执行的任何操作吗

请点击小提琴中的第2项

我的小提琴：

HTML

JS:

只需返回false：

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

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

---

阅读以下内容：

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

DOM级别3事件：

IE6-8您可以在事件处理程序或

window.event.cancelBubble=true

---

如果使用jquery，可以在所有浏览器中使用

->e.stopPropagation（）哪一个是首选的e.stop（）或返回false？？？感谢LotusReturn false似乎实现了我想要的功能…e.stopPropagatio（）没有…让我测试更多它是e.stopPropagation（），末尾有一个“n”（并且必须将“e”作为参数传递给事件函数）。e、 StopRopAgation停止事件向包含元素的传播。返回false除了这样做之外，还可以防止默认浏览器行为，例如当您单击链接（“”）时被带到另一个页面。如果您不想停止事件的传播，但想停止默认浏览器行为，则有e.preventDefault（）。

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%;
}

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");
    }
);

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

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