龙哥网

龙哥网

jquery阻止事件冒泡的代码(jquery阻止事件冒泡的方法)
2021-12-17

在js中,click、mouseove等称为事件。事件冒泡即是触发了这些事件产生的效果,禁止事件冒泡即是就算触发了这些事件也不会产生事件原有的效果。

事件冒泡大致分为两种,一种是HTML标签的默认行为,如a标签超链接跳转、form表单提交等;另一种是人为的给元素绑定某类事件,如click点击事件。因此阻止事件冒泡也分为两种代码

HTML代码:

<div class="go">
	<a href="https://www.tddx.net/">跳转</a>
</div>

<div class="click">
	<span>弹窗</span>
</div>

阻止默认事件冒泡

添加下面的代码之后,点击a标签,也不会跳转到http://www.neirong.org

<script>
$(function(){
	$('.go a').click(function(event){
		event.preventDefault();
	});
});
</script>

阻止弹窗事件冒泡

添加下面的代码之后,点击span标签,原来弹窗效果就不会生效。

<script>
$(function(){
	$('.click span').click(function(event){
		event.stopPropagation();
	});
});
</script>

总结:两种事件阻止冒泡的区别只是preventDefault()和stopPropagation()的区别。

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。