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

JavaScript 取消默认事件、阻止事件冒泡的方法首先页面上创建一个a标签:<ahref=”#”onclick=”do_Click()”>默认事件</a>然后给body加一个点击事件:document.body.onclick=function(){alert(‘body’);}当我点击这个a标签的时候会有两个我们不想发生的事情:1.浏览器地址尾部出现#号,这是a标签的默认事件。2.alert(‘body’);被执行了,这是事件冒泡。针对这两个有专门的控制方…

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

今天的文章JavaScript 取消默认事件、阻止事件冒泡的方法分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/24297.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注