您当前的位置: 首页 » DIV+CSS编程 » 只在父级节点中触发事件 在子节点中不触发
只在父级节点中触发事件 在子节点中不触发
论坛链接
只在父级节点中触发事件 在子节点中不触发
注意IE和Firefox等浏览器中的event.srcElement : e.target是怎么区别的
点击运行以下代码：
<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>
注意IE和Firefox等浏览器中的event.srcElement : e.target是怎么区别的
点击运行以下代码：
<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>