我们经常会遇到点击两个或者多个重叠的层事件的时候,往往点击最里的的一层会接连触发外面的点击事件。这时候就需要用到stopPropagation事件即阻止冒泡事件
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').bind('click',function(e){
e.stopPropagation()
alert('input')
})
$('div').bind('click',function(e){
e.stopPropagation();
alert('div')
})
$(document).bind('click',function(){
alert('document')
})
})
</script>
</head>
<body>
<div style="width:200px;height:200px;background:green;">
<input type="button" value="按钮">
</div>
</body>
<html>
相关文章
- 07-21angularJs——阻止事件冒泡
- 07-21Practical Training JQuery-JS中阻止冒泡事件的三种方法
- 07-21关于事件冒泡的一个坑
- 07-21js-事件1_阻止事件冒泡_弹框菜单
- 07-21JS阻止冒泡和取消默认事件(默认行为)
- 07-21ant design vue table组件中popconfirm按钮,阻止事件冒泡到表格行事件
- 07-21Js阻止事件冒泡与阻止默认事件:理解stopPropagation(),preventDefault(),return false的区别
- 07-21阻止事件冒泡和阻止浏览器默认行为
- 07-21js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
- 07-21zepto阻止事件冒泡