jquery中使用event.stopPropagation()阻止事件冒泡

Posted 我分享我快乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中使用event.stopPropagation()阻止事件冒泡相关的知识,希望对你有一定的参考价值。


案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下:

<!doctype html>

<html>

<head>

<style>

.box{width:200px;height:200px;background-color:green;}

span{display:block;width:100px;height:30px;background-color:skyblue;}

</style>

<script ></script>

<meta charset="utf-8">

<title>无标题文档</title>

</head>


<body>

<span>按我</span>

<div class="box">消失的盒子</div>

<script>

//点span显示盒子

$("span").click(

function(){

event.stopPropagation()//阻止事件冒泡

$(".box").show()

}

)

//点文档隐藏盒子

$(document).click(

function(){

$(".box").hide()

}

)

</script>

</body>

</html>


以上是关于jquery中使用event.stopPropagation()阻止事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章

怎样在Vue.js中使用jquery插件

如何在js文件中使用jquery

在 jQuery 选择器中使用 jQuery 对象

在 Phonegap 项目中使用普通 JQuery(使用 JQuery Mobile)

Ant-design中使用jQuery

我们可以在 jquery 中使用任何其他符号代替 jQuery 和 $ 符号吗