在点击div中的p时，如何阻止事件冒泡
更新时间：2017年02月07日 10:35:15 作者：九九smile
本文主要介绍了在点击div中的p时，如何阻止事件冒泡的方法，具有很好的参考价值，下面跟着小编一起来看下吧
今天整理笔记，发现在学习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中Number对象的toFixed() 方法详解
下面小编就为大家带来一篇JavaScript中Number对象的toFixed() 方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了JS/jquery实现一个网页内同时调用多个倒计时的方法,涉及js与jQuery基于定时器的时间相关操作技巧,需要的朋友可以参考下2017-04-04
bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css，下面通过本文给大家详细介绍需要引入的文件，对bootstrap table 表格感兴趣的朋友一起看看吧2016-12-12
本文主要介绍了js实现一键复制功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章将给大家详细介绍一下JavaScript实现模块的拖拽功能的代码示例，文中有详细的实现步骤,需要的朋友可以参考下2023-07-07
本篇文章主要介绍了ionic2懒加载配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文主要介绍了nestjs实现图形校验和单点登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
理解javascript定时器中的setTimeout与setInterval
这篇文章主要帮助大家学习理解javascript定时器中的setTimeout与setInterval，从实例出发进行深入探讨，感兴趣的小伙伴们可以参考一下2016-02-02
SelectValue是一个Preact组件,用于创建一个下拉选择框,它接收props如value、setfn、options和disabled,用于更新父组件中的值、处理下拉选择框的值改变事件、显示选项和禁用或启用下拉选择框,本文介绍preact组件案例的使用详解,感兴趣的朋友一起看看吧2025-03-03
今天总结一下javascript 内置对象Math中的函数用法，顺带写一下常见的案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2022-03-03
最新评论