event.stopPropagation方法阻止事件冒泡
我的图书馆
event.stopPropagation方法阻止事件冒泡
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&停止冒泡&/title&&script type="text/javascript" src="jquery-1.8.1.js"&&/script&&script type="text/javascript"&$(function(){&$('#div1').click(function(){&&alert('div1')&&})&$('#div2').click(function(event){&&alert('div2')&&//如果没有下边这一行代码，点击div2就会向上冒泡引发div1的click动作&&//下边这行代码的作用是阻止事件冒泡，或者叫阻止向上传播&&event.stopPropagation();&&//通过return false既可以阻止事件冒泡又可以停止默认行为。&&//return false&&})&&})&/script&
&body&&div id="div1" style="border:1 width:200height:100"&最外层的div&&&div id='div2' style="border:1 width:50 height:50px"&第二个&/div&&/div&&/body&&/html&
TA的最新馆藏[转]&[转]&[转]&js事件(Event)之（三）阻止事件冒泡 - yycode - 博客园
前续：本文来自于网络文章整理，仅供参考，欢迎纠错指正。
JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在&泡泡&离开对象之前刺破它。
1 function stopPropagation(e) {
e = e || window.
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
e.cancelBubble = true; //IE阻止冒泡方法
1 function stopPro(evt){
var e = evt || window.
//returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，
//可以取消发生事件的源元素的默认动作。
//window.event?e.returnValue = false:e.preventDefault();//默认事件
window.event?e.cancelBubble=true:e.stopPropagation();
jQuery做法：
方式一：event.stopPropagation();
1 $("#div1").mousedown(function(event){
event.stopPropagation(); //阻止冒泡事件，上级的xxx事件不会被调用，但不阻止事件本身
1 $("#div1").mousedown(function(event){
return false; //不仅阻止了事件往上冒泡，而且阻止了事件本身2554人阅读
JavaScript（31）
今天来看看前端的冒泡和事件默认事件如何处理
1.event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
3.return false &；
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return
false就等于同时调用了event.stopPropagation()和event.preventDefault()
4.我们来看看几组demo，使用jquery进行DOM操作
这是html代码，div里面套了一个a标签，连接到百度
&div class=&box1&&
&a href=&& target=&_blank&&&/a&
&/div&css代码，a标签占父元素的空间的1/4，背景颜色为红色；
height: 200
width: 600
height: 50%;
width: 50%;
background：
下面来看js代码，第一种&
//不阻止事件冒泡和默认事件
$(&.box1&).click(function(){
console.log(&1&)//不阻止事件冒泡会打印1，页面跳转;
//阻止冒泡
$(&.box1 a&).click(function(event){
event.stopPropagation();//不会打印1，但是页面会跳转；
$(&.box1&).click(function(){
console.log(&1&)
$(&.box1 a&).click(function(event){
//阻止默认事件
event.preventDefault();//页面不会跳转，但是会打印出1，
$(&.box1&).click(function(){
console.log(&1&)；
$(&.box1&).click(function(){
console.log(&1&)
//阻止冒泡
$(&.box1 a&).click(function(event){
event.stopPropagation();
//阻止默认事件
event.preventDefault() //页面不会跳转，也不会打印出1
$(&.box1&).click(function(){
console.log(&1&)
$(&.box1 a&).click(function(event){
//页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和event.preventDefault()
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：32983次
排名：千里之外
原创：46篇
转载：18篇
(1)(2)(5)(2)(1)(11)(9)(26)(7)2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何阻止子元素触发父元素的事件 - 简书
如何阻止子元素触发父元素的事件
今天我做了一实验，想要实现当一个div嵌套另外一个div的时候，点击外层div的时候触发事件，而点击内层div的时候不进行事件触发，代码如下：
原本我想着只给容器ct添加一个事件而不给其内的子元素添加事件，就能实现我的效果，结果后来意识到内层的div也属于容器ct的一部分，这样做无论点击容器部分还是内层div都会触发效果：
然后我心想如果能把外层ct容器和内层的div分辨出来不就可以了吗，然后接产生了解决方案一：
解决方案一：获取事件触发的实际目标(target)
我给事件处理函数添加了事件参数e，获取到了e.target，然后对e.target的特征(class)进行了判断，判断如果是内层div就不进行事件触发，确实达到了我想要的效果，代码如下：
后来发现并没有解决实际的问题，假如有很多个内层div，并且每一个div的class都是不一样的，或者内层div里面又有嵌套元素的话这个方法就不生效了：
于是我又想到前两天学习了一下关于DOM事件传播的机制，在DOM2级事件流中包含事件捕获和事件冒泡两个阶段，其中触发事件处理程序时，事件传播先是进入事件捕获阶段，事件由外层向内层具体元素传播，然后进入事件冒泡阶段，由内层具体元素再向外层进行传播，事件的处理默认是在冒泡阶段，如下图所示：
dom2级事件流
其中event对象中有一个方法是stopPropagation()，可以利用这个方法阻止事件的传播，然后我就想着能不能用用这个方法来阻止事件的捕获，在容器ct的点击处理程序上添加stopPropagation()，addEventListener第三个参数设置为true，让事件处理发生在容器ct的捕获阶段，不向更具体的内层元素进行传播，结果发现我又踩坑了：原因是事件捕获是不能被阻止的，否则定位不到具体的元素；
那么只能采用阻止事件冒泡的方法来达成效果，于是出现了解决方案二：
解决方案二：阻止事件冒泡
首先理顺一下思路，因为我不想容器ct的子元素触发容器ct的事件，所以当我点击容器ct子元素时，事件进入捕获阶段，传播路径如下：
然后是冒泡并且执行处理方法的阶段：
div.c(触发ct事件)
div.a(触发ct事件)
div#ct(触发ct事件)
理清了这个思路后问题就变得简单了，我们只要获取到了ct子元素div.a，然后给它单独添加stopPropagation()阻止事件冒泡，与此同时容器ct本身的事件触发不变动，就能达成效果，代码如下：
这样子就能彻底解决方案一所出现的问题了。}