子元素单击事件触发父级单击事件
假设你有这样的代码：
<html> <head> </head> <body> <div id="parentDiv" onclick="alert('parentDiv');"> <div id="childDiv" onclick="alert('childDiv');"> </div> </div> </body> </html> 我不想触发parentDiv点击事件，当我点击childDiv ，我该怎么做？
更新
另外，这两个事件的执行顺序是什么？
你需要使用event.stopPropagation（）
现场演示
$('#parentDiv').click(function(event){ event.stopPropagation(); alert(event.target.id); });
event.stopPropagation（）
说明：防止事件冒泡DOM树，阻止任何父处理程序被通知事件。
没有jQuery： DEMO
<div id="parentDiv" onclick="alert('parentDiv');"> <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;"> AAA </div> </div>
stopPropagation()方法停止将事件冒泡到父元素，从而阻止任何父处理程序被通知事件。
你可以使用方法event.isPropagationStopped()来知道这个方法是否曾经被调用（在该事件对象上）。
句法：
以下是使用此方法的简单语法：
event.stopPropagation()
例：
$("div").click(function(event) { alert("This is : " + $(this).prop('id')); // Comment the following to see the difference event.stopPropagation(); });
单击事件泡沫 ，现在什么是冒泡的意思，开始的好点在这里 。 你可以使用event.stopPropagation() ，如果你不希望这个事件应该进一步传播。
在MDN上也是一个很好的链接
我面临同样的问题，并通过这种方法解决。 html：
<div id="parentDiv"> <div id="childDiv"> AAA </div> BBBB </div>
JS：
$(document).ready(function(){ $("#parentDiv").click(function(e){ if(e.target.id=="childDiv"){ childEvent(); } else { parentEvent(); } }); }); function childEvent(){ alert("child event"); } function parentEvent(){ alert("paren event"); }
