JavaScript事件冒泡传接及阻止传递
日期：2014-05-16 浏览次数：20417 次
JavaScript事件冒泡传递：
?
<title>冒泡事件</title>
<script type="text/javascript">
function Add(sText)
{
document.getElementById("Console").innerHTML +=sText;
}
</script>
</head>
<body onclick="Add('body事件触发')">
?
<div onclick="Add('div事件触发')">
<p onclick="Add('p事件触发')" style="background:#c00;">点击
</div>
?
<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>
</body>
?
阻止事件冒泡传递：
?
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;
2.阻止浏览器的默认行为
JavaScript代码
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;
?
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
??? <head>
??????? <title> </title>
??<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??????? <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
??????? <script type="text/javascript">
??????????? function doSomething(obj, evt){
??????????????? alert(obj.id);
??????????????? var e = (evt) ? evt : window.event;
??????????????? if (window.event) {
??????????????????? e.cancelBubble = true;
??????????????? }
??????????????? else {
??????????????????? //e.preventDefault();
??????????????????? e.stopPropagation();
??????????????? }
??????????? }
??????? </script>
??? </head>
??? <body>
??????? <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow;">
??????????? <p>
??????????????? This is parent1 div.
??????????? </p>
??????????? <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
??????????????? <p>
??????????????????? This is child1.
??????????????? </p>
??????????? </div>
??????????? <p>
??????????????? This is parent1 div.
??????????? </p>
??????? </div>
??????? <br/>
??????? <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
??????????? <p>
??????????????? This is parent2 div.
??????????? </p>
??????????? <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
??????????????? <p>
??????????????????? This is child2.?can't?bubble.
??????????????? </p>
??????????? </div>
??????????? <p>
??????????????? This is parent2 div.
??????????? </p>
??????? </div>
??? </body>
</html>
form标签不支持冒泡，一个页面可以有多个form，但是form不能嵌套，如果form嵌套了，内嵌的form表单submit没有反应，最外层的form表单是可以提交的。
========================================================================
?
IE：中用window.event.srcElement取得当前元素
FF：中用event.target取得当前元素
document.onclick = function(e)??? //要兼容FF的话，e这个参数一定要写上
{
??? e??????????????? = window.event || e;
??? var srcElement?? =?? e.srcElement || e.target;
??? alert(srcElement.innerHTML);
}
?
<html>
<script>
function?? getEvent()
{ var?? i?? =?? 0;
if(document.all) return?? window.event;
func=getEvent.caller;
while(func!=null)
{
var?? arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event){
return?? arg0;
}
}
func=func.caller;
}
return?? null;
}
document.onclick?? =?? function(e)?? //
