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

Question

我正在使用JQuery，并且我有一个容器（Div），大小为100，30， 和放置在其中的图像（大小为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(); 
}); 

参见：

• demonstration
• jQuery documentation: .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.stopPropagation()功能上则传递了event你会想要在你的图片上应用这个来阻止点击传播到div。