处理容器上的点击事件并包含html元素

Question

我正在使用JQuery，我有一个大小为100乘30的容器（div），以及放置在其中的图像（尺寸为20x20）。

我希望在单击div时进行一些事件处理以及当点击图像时发生的不同事件处理。

我不希望在单击图像时触发div的处理程序。

我应该如何处理事件绑定和事件传播？

感谢

Answer 1

return false;停止传播或使用event.stopPropagation()：

<div id="mydiv">
    <p>Your div</p>
    <img alt="your image" />
    <span>A span inside the div</span>
</div>

$("#mydiv").click(function(){
    alert("You clicked on the div element");
});
$("#mydiv > img").click(function(e){
    alert("You clicked on a img inside the div element");
    return false; /* will prevent the browser default action! */
});
$("#mydiv > span").click(function(e){
    alert("You clicked on a span inside the div element");
    e.stopPropagation();
});

另请参阅：

• 演示
• jQuery文档：.bind():

  从处理程序返回false相当于对事件对象调用.preventDefault()和.stopPropagation()

Answer 2

您需要停止click事件在图像上的传播：

$("#yourImage").click(function(e) {
    e.stopPropagation();
    //Do stuff on image click
});
$("#yourDiv").click(function() {
    //Do stuff on div click
});

由于DOM事件会在树中弹出，因此任何对子元素（在您的情况下为img）的单击都会通过任何祖先元素（在我们的情况下是div）弹出。通过在事件对象上调用stopPropagation，可以防止这种情况发生，并且事件保持原样。

请注意，您可以从事件处理程序返回false以具有相同的效果，但这也会产生潜在的不良影响，即阻止事件的默认浏览器操作。

Answer 3

点击事件是用.click（）函数处理的。你选择一些东西，然后应用点击，像这样：

$("#mydiv").click(function(event){
    //do whatever you want when the div is clicked.
});

要阻止事件"冒泡"或传播，在该点击函数中，您可以使用return false结束，也可以在传入的event上使用event.stopPropagation（）函数。您需要将此应用于图像以阻止点击传播到分区。