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

最新推荐文章于 2024-05-12 21:38:39 发布

编程界小明哥

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111265325

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

首先页面上创建一个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的点击事件也被阻止了（阻止了事件冒泡）

编程界小明哥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 取消默认事件、阻止事件冒泡的方法

首先页面上创建一个a标签：<a href="#" onclick="do_Click()">默认事件</a>然后给body加一个点击事件：document.body.onclick=function(){ alert('body'); }当我点击这个a标签的时候会有两个我们不想发生的事情：1.浏览器地址尾部出现 # 号，这是a标签的默认事件。2.alert('body'); 被执行了，这是事件冒泡。针对这两个有专门的控制方...
复制链接

扫一扫