Question

我正在使用JQuery，我有一个100乘30的容器（Div），和放在其中的图像（大小为20x20）。

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

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

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

由于

Answer 1

您需要停止在图片上传播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 2

点击事件由.click()功能处理。您选择一些内容然后应用点击，如下所示：

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

要阻止事件“冒泡”或传播，在点击功能中，您可以使用return false完成，也可以使用传入的event上的event.stopPropagation()功能。我想在你的图像上应用它来阻止点击传播到div。

Answer 3

要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();
});

另见：

demonstration
jQuery documentation: .bind()：

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

处理容器上的click事件和包含的html元素

3 个答案: