中文(简体)
只在父级节点中触发事件 在子节点中不触发
注意IE和Firefox等浏览器中的event.srcElement : e.target是怎么区别的
点击运行以下代码：
运行演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 只在父级div中触发事件 在子div中不触发 </title> <style type="text/css"> div{background:#eee;margin:20px auto;border:1px solid #ccc;} div div{background:#fff;margin:40px;} #ctnr{width:500px;} #hd{height:300px;} #bd{height:200px;} </style> </head> <body> <div id="ctnr"> ctnr 该div容器包含两个div，<br />但是不让动作发生在其包含的子div里面，只在父div里面触发。 <div id="hd">hd 在这里无触发</div> <div id="bd">bd 在这里无触发</div> 动作只触发在空白的地方 </div> <script type="text/javascript"> <!-- function initDrag(e) { var oDragHandle = document.getElementById&&document.all ? event.srcElement : e.target; if(oDragHandle.id == "ctnr"){alert(oDragHandle.id + " clicked.");} } document.onclick=initDrag; //--> </script> </body> </html>
