在点击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 相关文章推荐
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Javascript 严格模式use strict详解
Sep 16 Javascript
JavaScript模块详解
Dec 18 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
vue实现简单加法计算器
Oct 22 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 定界符 使用技巧
2009/06/14 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python 实现目录复制的三种小结
2019/12/04 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python try...finally...的实现方法
2020/11/25 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
应用数学自荐书范文
2013/11/24 职场文书
决心书标准格式
2014/03/11 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
办理收楼委托书范本
2014/10/09 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
施工安全协议书
2016/03/22 职场文书