在点击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.将阻止事件冒泡的代码封装成了一个函数，可以多次调用。

好了，问题圆满解决。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 利用JQuery阻止事件冒泡

    利用JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>

  • Jquery阻止事件冒泡 event.stopPropagation

    描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是

  • jQuery阻止事件冒泡具体实现

    下面是html代码部分: 复制代码 代码如下: <body><div id="content">    外层div元素    <span>内层span元素</span>    外层div元素</div> <div id="msg"></div></body> 对应的jQuery代码如下: 复制代码 代码如下: <script type="text/java

  • jquery 事件冒泡的介绍以及如何阻止事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 复制代码 代码如下: <%@PageLanguage="C#&q

  • cancelBubble阻止事件冒泡

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • 兼容各大浏览器的JavaScript阻止事件冒泡代码

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件). 当事件在

随机推荐