JavaScript事件冒泡传接及阻止传递 _JavaScript

JavaScript事件冒泡传递及阻止传递

JavaScript事件冒泡传递：

</head>
<body onclick="Add('body事件触发')">

</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)?? //要兼容FF的话，这个参数一定要写上
{
??? e?? =?? getEvent();
??? var?? srcElement?? =?? e.srcElement?? ||?? e.target;
??? alert(srcElement.innerHTML);
}
</script>
<body>
window.event事件测试 <br>
<input?? type= "button "?? name= "b_test "?? value= "测试 ">
</body>
</html>