Web事件控制详解-优快云博客

web中事件有关的操作，比如修改事件的默认行为和防止事件的传播等，web开发中有关事件控制有关的方法：

event.preventDefault(), event.stopPropagation(), event.cancelBubble()

1，event.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
例如，链接单击后默认行为即链接到给定的链接地址，但通过该方法可以设置函数改变链接的默认单击行为。
注意，如果 Event 对象的 cancelable 属性是 fasle (说明没有默认动作可以取消)，那么就没有默认动作，或者不能阻止默认动作。则调用该方法无效。

function xxFun(evt){
	//兼容实现--阻止事件的默认行为	
    var e = evt || window.event;	
	if(window.event){ 		
		e.returnValue = false;  //ME IE
	}else{ 		
		e.preventDefault();     //W3C Browser
	}
    //...other code...
}

2，event.stopPropagation() 该方法将停止事件的传播/冒泡，阻止它被分派到其他 Document [主要是当前节点的下面]节点,

阻止事件的传播/冒泡的方法是 cancelBubble（MS IE）和 stopPropagation（standard W3C）。在事件传播的任何阶段都可以调用它。
注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

function yyFun(evt){
	//兼容实现--阻止事件的传播/冒泡
    var e = evt || window.event;	
	if(window.event){				
		e.cancelBubble = true;  //支持cancelBubble属性的浏览器，如IE,Chrome等
	}else{			
		e.stopPropagation();    //W3C Browser
	}
    //...other code...
}

完整的例子：

<!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>Event about</title>
<style type="text/css">
*{ font-family:verdana,arial; font-size:12px;}
p{line-height:18px;}
pre{ padding:5px; font-family:verdana,arial; border:1px dotted blue; color:#03F; font-size:11px; margin:15px 0px;}
</style>

<script type="text/javascript" language="javascript">
function divFun(evt){
	alert('这里是事件到达DIV的响应函数提示');	
}

function aFun(evt){
	var e = evt || window.event;	
	var oa = document.getElementById("alink1");	
	var msg = '1，这里是事件到达链接[url = ' + oa.href + ']的响应函数, 但并未链接到指定的URL，因为链接的默认单击事件行为被改变了\n';
	msg += '注意:只是阻止默认的“单击”事件的默认行为，但对本节点的其它事件如onmouserover等事件不影响';
	msg += '\n2，同时阻止事件向下面的节点DIV传递事件';
	alert(msg);	
	
	//兼容实现--阻止事件的默认行为	
	if(window.event){ 		
		e.returnValue = false; //ME IE
	}else{ 		
		e.preventDefault();    //W3C Browser
	}
	
	//兼容实现--阻止事件的传播/冒泡
	if(window.event){				
		e.cancelBubble = true;  //支持cancelBubble属性的浏览器，如IE,Chrome等
	}else{			
		e.stopPropagation();    //W3C Browser
	}	
}

function aoverFun(obj){
	//alert('这里是双击之后相应的函数提示，这个时间跟单击事件无关');	
	var o = document.getElementById("msgTip");
	o.innerHTML = '链接文字: [' + obj.innerHTML + ' ], URL = ' + obj.href + '<br>这里是鼠标在上面的响应事件';	
}

function aoutFun(){
	document.getElementById("msgTip").innerHTML ='';
}
</script>
</head>
<body>
<p>
事件控制有关的方法： <b>event.preventDefault(), event.stopPropagation(), event.cancelBubble()</b>
</p>
<p>
<b>event.preventDefault()</b>
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。<br/>
例如， 链接 单击后默认行为即链接到给定的链接地址，但通过该方法可以设置函数改变链接的默认单击行为。<br/>
注意，如果 Event 对象的 cancelable 属性是 fasle (说明没有默认动作可以取消)，那么就没有默认动作，或者不能阻止默认动作。则调用该方法无效。
</p>
<pre>
function xxFun(evt){
	//兼容实现--阻止事件的默认行为	
    var e = evt || window.event;	
	if(window.event){ 		
		e.returnValue = false;  //ME IE
	}else{ 		
		e.preventDefault();     //W3C Browser
	}
    //...other code...
}
</pre>

<p>
<b>event.stopPropagation()</b>
该方法将停止事件的传播/冒泡，阻止它被分派到其他 Document [主要是当前节点的下面]节点,<br/>
阻止事件的传播/冒泡的方法是 cancelBubble（MS IE）和 stopPropagation（standard W3C）。在事件传播的任何阶段都可以调用它。<br/>
注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
</p>
<pre>
function yyFun(evt){
	//兼容实现--阻止事件的传播/冒泡
    var e = evt || window.event;	
	if(window.event){				
		e.cancelBubble = true;  //支持cancelBubble属性的浏览器，如IE,Chrome等
	}else{			
		e.stopPropagation();    //W3C Browser
	}
    //...other code...
}
</pre>

<div onclick="javascript:divFun(event);" style="padding:20px; border:1px solid red; width:500px;">
div 容器，其包含里[上]面的 a 元素，单击这里试看
<a id="alink1" href="http://www.baidu.com" style="padding:10px; border:1px solid blue; margin:5px 0px; display:block;" 
 onclick="javascript:aFun(event);" onmouseover="javascript:aoverFun(this);" onmouseout="javascript:aoutFun();">
<b>TEST</b>
这里是 a 元素容器,其下面是div容器,点击看看
</a>
</div>
<p>
<div id="msgTip"></div>
</p>

</body>
</html>