在点击div中的p时,如何阻止事件冒泡


Posted in Javascript onFebruary 07, 2017

今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者。

我还是以一个案例来说明问题,html代码如下:

<div onclick="show('a')">
   <p onclick="show('b')"></p>
 </div>

css代码如下:

div{
  width:500px;
  height:500px;
  background:red;
 }
 p{
  width:200px;
  height:200px;
  background:blue;
 }

js代码如下:

function show(info){
    alert(info);
 }

稍微懂点js的人都知道当我点击p时,基于事件冒泡机制,会触发父元素div的onclick事件,结果是先弹出b、再弹出a。

那么问题来了,如何修改show()这个函数而只弹出b?我第一次的解决方法是(各位大神勿喷):

function show(e,info){
 function cancelBubble(e){
  e = e || window.event;
  if (e.stopPropagation) {  
     e.stopPropagation(); 
  }else {   
     e.cancelBubble = true; 
  } 
 }
 alert(info);
}

结果老是报错。我就开始各种百度,最终解决方法如下:

function show(info){
   alert(info);
   cancelBubble();
}
function cancelBubble(e) { 
   var evt = e ? e : window.event; 
    if (evt.stopPropagation) {  //W3C 
     evt.stopPropagation(); 
    }else {  //IE  
     evt.cancelBubble = true; 
    } 
}

至于为什么这样?我分析的是这样做有两个好处:1.阻止了事件冒泡,达到只弹出b目的; 2.将阻止事件冒泡的代码封装成了一个函数,可以多次调用。

好了,问题圆满解决。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
bootstrap vue.js实现tab效果
Feb 07 #Javascript
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
javascript Object与Function使用
2010/01/11 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
Node.js的特点详解
2017/02/03 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现文件的分割与合并
2019/08/29 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
大学生工作推荐信范文
2013/12/02 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
党的群众路线调研报告
2014/11/03 职场文书
戒赌保证书
2015/05/11 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书