Jquery阻止事件冒泡 event.stopPropagation

描述： 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

version added: 1.0
event.stopPropagation()
我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

这个方法对 trigger() 来自定义的事件同样有效。

注意，这不会阻止同一个元素上的其它事件处理函数的运行。

Additional Notes:
自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；元素上的事件将在被委托事件被调用的时候执行。
Example:
灭掉click事件的冒泡。


代码如下:

$("p").click(function(event){
event.stopPropagation();
// do something
});

东西并不难，主要是记录下其中的阻止事件冒泡。

　　因为div添加了单击事件，div内部的img也添加了单击事件，所以当单击img时会先触发img上的单击事件，再触发div上的单击事件，这就是事件冒泡。

　　在Jquery中我们可以很方便的阻止他。

　　如下

代码如下:

event.stopPropagation();

　　这样一来单击img就不再触发div的单击事件啦

代码如下:

$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('<img src="http://www.jb51.net/lovejjhao/341157/o_cha.jpg"/>').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
}
});

赞 (0)

相关推荐

  • jquery hover 不停闪动问题的解决方法(亦为stop()的使用)

    在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细. 解决闪动 可以使用Stop() stop([clearQueue],[jumpToEnd]) 概述 停止所有在指定元素上正在运行的动画. 如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行 参数 [cl

  • 理解jQuery stop()方法

    作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库.我们都晓得,在jQuery中有一个很强大的方法--stop(),他是阻止在连续动画或事件中出现重复累积状况的方法.那么,stop()怎么用呢?来带大家先认识一下stop()吧: stop()在语法上有两个参数,分别都是Boolean布尔值.且都是可选的,但是也有规定,如下: $(selector).stop(stopAll,goToEnd) 参数:(默认情况下,不写参数,则会被认为两个参数都是false.) stopAll:

  • 逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

    首先给大家介绍jquery data()函数 jQuery中data()函数用于向被选元素附加数据,或者从被选元素获取数据.通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 一.jquery data()的作用 data() 方法向被选元素附加数据,或者从被选元素获取数据. 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 该函数属于jQuery对象(实例).如果需要移除通过data()函数存放的数据,请使用 remov

  • 详解jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. stop()方法的语法结构为: stop([clearQueue],[gotoEnd]); 参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false).clearQueue代表是否清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态. (1)

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jq stop()和:is(:animated)的用法及区别(详解)

    stop(true,true): 表示停止匹配元素正在进行的动画并跳转到末状态,清空未执行完的动画队列.常用于"解决光标移入移出得过快导致的动画效果与光标动作不一致"问题! jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法 $(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队

  • jQuery stop()用法实例详解

    近期查看前辈的代码,发现在使用animate()的时候前面需要加上stop(),来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,今天查了下stop()中参数的意义和具体使用方法,分享给大家. stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画. stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画. stop()等价于stop(false,false):停止被选元素当前的动画,但允许完成以后队列的所有

  • Jquery ajaxStart()与ajaxStop()方法(实例讲解)

    jQuery中通过ajaxStart()和ajaxStop()两个方法提供了类似的功能.当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函数,这个函数将在事件发生时被调用. 例子 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="serve

  • jquery中animate的stop()方法作用实例分析

    本文实例分析了jquery中animate的stop()方法作用.分享给大家供大家参考.具体分析如下: 这里以一个视频中的代码段告诉你stop()的作用: 代码如下: <style type="text/css"> ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;} </style> <ul id="flyul"> &l

  • Jquery阻止事件冒泡 event.stopPropagation

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

  • jQuery阻止事件冒泡实例分析

    jQuery阻止事件冒泡实例分析

    本文实例讲述了jQuery阻止事件冒泡.分享给大家供大家参考,具体如下: 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. 阻止事

  • 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事件). 当事件在

  • 利用JQuery阻止事件冒泡

    利用JQuery阻止事件冒泡

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

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

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

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

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

  • jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <div id="box"> <p id="btn">我是按钮</p> </div> </body> style: .hid{ display:none; } script: $('#box').click(functio

  • jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    本文实例讲述了jQuery事件绑定和解绑.事件冒泡与阻止事件冒泡及弹出应用.分享给大家供大家参考,具体如下: 事件的绑定和解绑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src=&qu

  • javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时

随机推荐