阻止事件冒泡event.stopPropagation()
2017-12-14 21:41
681 查看
/******************
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
**********/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
color: red;
}
</style>
</head>
<body>
<div class="div" onclick="tex()">
<a href="#" id= "bt" onclick="tex1()" >发送验证码</a>
</div>
<script>
function tex1(){
alert("a元素的click事件！");
//event.stopPropagation(); -----------------------------若注释掉这句就会弹出两次框，若不注释，只弹出tex1（）函数中的框。因为没有此语句时，div元素与a元素都有onclick事件，且a元素为div元素的子元素，所以点击a元素会产生事件冒泡，也会触发div元素的click事件。当有event.stopPropagation(); 时，阻止了事件冒泡，就之弹出只弹出tex1（）函数中的框。
}
function tex(){
alert("div元素click的事件！")
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
</body>
</html>
定义和用法
不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
说明
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。**********/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
color: red;
}
</style>
</head>
<body>
<div class="div" onclick="tex()">
<a href="#" id= "bt" onclick="tex1()" >发送验证码</a>
</div>
<script>
function tex1(){
alert("a元素的click事件！");
//event.stopPropagation(); -----------------------------若注释掉这句就会弹出两次框，若不注释，只弹出tex1（）函数中的框。因为没有此语句时，div元素与a元素都有onclick事件，且a元素为div元素的子元素，所以点击a元素会产生事件冒泡，也会触发div元素的click事件。当有event.stopPropagation(); 时，阻止了事件冒泡，就之弹出只弹出tex1（）函数中的框。
}
function tex(){
alert("div元素click的事件！")
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js阻止时间冒泡事件——event.stopPropagation()
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
- Jquery阻止事件冒泡 event.stopPropagation
- AngularJS阻止事件冒泡$event.stopPropagation()
- 阻止默认和冒泡事件，认清event.preventDefault()、event.stopPropagation()和return false区别
- 实例 （用到 阻止事件冒泡 event.stopPropagation();）
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
- 事件冒泡阻止event.stopPropagation()
- Jquery阻止事件冒泡 event.stopPropagation
- click点击一次触发多次，冒泡与阻止冒泡，event.stopPropagation()和event.preventDefault()，return false三种的区别
- jquery的冒泡事件event.stopPropagation()兼容问题
- jquery的冒泡事件event.stopPropagation()
- jquery的冒泡事件event.stopPropagation()
- firefox 兼容 event.stopPropagation() 阻止冒泡。
- 阻止冒泡的方法 event.stopPropagation();
- jquery里阻止冒泡ev.stopPropagation()