JS阻止事件冒泡详解编程语言

如下测试代码:

<style type="text/css"> 
	#div{border: 1px solid red;width: 500px;} 
	#p1,#p2{border: 1px solid red;} 
</style>
<div id="div" onclick="clickDiv()"> 
	我是外层DIV 
	<p id="p1" onclick="clickP1(event);">我是P1 阻止事件冒泡</p> 
	<p id="p2" onclick="clickP2();">我是P2 未阻止事件冒泡</p> 
</div>

JS阻止事件冒泡代码:

<script type="text/javascript"> 
			 
	function clickDiv(){ 
		alert("我是外层DIV"); 
	} 
	function clickP1(e){ 
		alert("p1 阻止事件冒泡"); 
		e.stopPropagation(); 
	} 
	function clickP2(){ 
		alert("p2 未 阻止事件冒泡"); 
	} 
	 
</script>

jQuery阻止事件冒泡代码:

$(function(){ 
	$("#div").click(function(){ 
		alert("我是外层DIV"); 
	}) 
	$("#p1").click(function(event){ 
		alert("p1 阻止"); 
		event.stopPropagation(); 
	}) 
	$("#p2").click(function(){ 
		alert("p2 未阻止"); 
	}) 
})

有时候点击提交按钮会有一些默认事件。比如表单提交(submit)

可通过event.preventDefault();阻止默认行为

$("input[type='submit']").click(function(event){ 
	//在这里可以加入一些逻辑判断  以决定是否阻止默认行为 
	event.preventDefault(); 
})

PS:很多文章都提到下面代码

function stopDefault(e) {   
	//如果提供了事件对象,则这是一个非IE浏览器    
	if(e && e.preventDefault) {   
	  //阻止默认浏览器动作(W3C)   
	  e.preventDefault();   
	} else {   
	  //IE中阻止函数器默认动作的方式    
	  window.event.returnValue = false;    
	}   
	return false;   
}

先判断浏览器是否IE浏览器,本人的是IE9  无需判断

照样可以阻止事件冒泡。

对此问题不解…  不知道大家是人云亦云呢,还是我的方法不对疑问

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/14540.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论