JavaScript 取消默认事件、阻止事件冒泡的方法

Bertha 。 2021-07-24 17:43 534阅读 0赞

首先页面上创建一个a标签：<a href="\#" οnclick="do\_Click()">默认事件</a>

然后给body加一个点击事件：

document.body.οnclick=function()\{  
          alert('body');  
      \}

当我点击这个a标签的时候会有两个我们不想发生的事情：

1.浏览器地址尾部出现 \# 号，这是a标签的默认事件。

2.alert('body'); 被执行了，这是事件冒泡。

针对这两个有专门的控制方法：preventDefault、stopPropagation，为兼容还要用到 returnValue、cancelBubble

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            	*{
            		padding:0;
            		margin:0;
            	}
            	
            </style>
            </head>
            <body>
            	<a href="#" onclick="do_Click()">默认事件</a>
            </body>
    <script>
    	function do_Click(e){
    		alert('do_Click')
    		var e = e || window.event;
    		//阻止默认事件[兼容处理]
    		if(e.preventDefault){
    			e.preventDefault();
    		}else{
    			e.returnValue=false;
    		}
    		//阻止事件冒泡[兼容处理]
    		if(e.stopPropagation){
    			e.stopPropagation();
    		}else{
    			e.cancelBubble=true;
    		}
    	}	
    	
    	document.body.onclick=function(){
    		alert('body');
    	}
    	
    	
    </script>
    </html>

经过如此处理后，浏览器地址就不会出现\#号了（取消了默认事件），同时body的点击事件也被阻止了（阻止了事件冒泡）