stopImmediatePropagation&stopPropagation 区别

stopImmediatePropagation 与 stopPropagation 不同之处 请仔细查看加粗的文字并结合图例理解。

stopImmediatePropagation 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。此方法会立即生效,并且会影响当前节点中的事件侦听器。

stopPropagation 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。

下面是之前项目中的一个对于这种问题的出错的例子。

js代码如下:


/模拟浏览器自带的select效果/
$(function(){

$(".select").live(‘click‘,function(event){
    var s=$(this);
    var z=parseInt(s.css("z-index"));
    var dt=$(this).find("dt");
    var dd=$(this).find("dd");
    var _show=function(){dd.slideDown(200);s.css("z-index",z+1);};   //展开效果
    var _hide=function(){dd.slideUp(200);s.css("z-index",z);};    //关闭效果
    var target = event.target;
    /*2014-6-25 修复*/
    if(target.nodeName == ‘DT‘  || $(target).parent().is(‘dt‘) ){
        if($(this).find("dd").is(":hidden") && $(this).find("li").length){
            _show();
            /*2014-10-8 17:34:23 修复,之前使用event.stopPropagation();*/
            event.stopImmediatePropagation();
        }else{
            _hide();
        }
    }
    dd.find("a").click(function(event){
        event.stopPropagation();
        var html = $(this).html(),
            value = $(this).data("value");
        dt.html(html);
        s.find(‘input:hidden‘).val(value); // 添加隐藏按钮控制
        _hide();
    });     //选择效果(如需要传值,可自定义参数,在此处返回对应的“value”值 )
    $("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
});

});

html代码如下:

<dl class="select width80">
                                    <dt>结束月份</dt>
                                    <dd>
                                        <ul class="J_month">
                                            <li>
                                                <a href="javascript:;" data-value="至今">至今</a>
                                            </li>
                                        </ul>
                                        <input type="hidden" name="endMonth" />
                                    </dd>
                                </dl>

stopImmediatePropagation&stopPropagation 区别

时间: 2024-08-12 20:37:53

stopImmediatePropagation&stopPropagation 区别的相关文章

return、reutrn false、e.preventDefault、e.stopPropagation、e.stopImmediatePropagation的区别

return var i = function(){ return } console.log(i())//undefined return的主要作用是阻止函数继续执行,直接返回undefined return false <a class="baidu" href="http://www.baidu.com">百度</a> $('.baidu').on('click',function(e){ console.log(1) return f

fastclick.js源码解读分析

阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生背景与使用 在解读源码前,还是简单介绍下fastclick: 诞生背景 我们都知道,在移动端页面开发上,会出现一个问题,click事件会有300ms的延迟,这让用户感觉很不爽,感觉像是网页卡顿了一样,实际上,这是浏览器为了更好的判断用户的双击行为,移动浏览器都支持双击缩放或双击滚动的操作,比如一个链

13. javacript高级程序设计-事件

1. 事件 1.1 事件流 事件流描述的是从页面中接受事件的顺序,IE的事件是冒泡流,而Netscape Communicator的事件流是事件捕捉流. 1.1.1 事件冒泡 <!DOCTYPE html> <html> <title>xxx</title> <body> <div id="myDiv">click me</div> </body> </html> 如果你点击了页

Zepto源码分析-event模块

源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var _zid = 1, undefined, slice = Array.prototype.slice, isFunction = $.isFunction, isString = function(obj){ return typeof obj

[转]as3事件流机制彻底理解

题记: 看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能喝很直观的理解.而这篇教程以将事件流过程比喻成捕鱼过程,形象简单. 在此基础上对于as3事件流总算有了全面的理解.事件流机制说白了就是为了能让开发者能更好地控制事件调用顺序. addEventListener(type:String, listener:Function, useCapture:Boolean= false, priority:int= 0, useWeakReference:Boolean= false):

W3C/JQuery中stopImmediatePropagation和stopPropagation的区别

W3C的DOM-Level-3标准中,event事件对象有stopPropagation和stopImmediatePropagation这2个函数. DOM3中Event标准:http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html. JQuery我用的是2.1.1和1.10.2,也支持这2个标准的函数. stopImmediatePropagation : 阻止事件流中当前节点的和所有后

stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

preventDefault()、stopPropagation()、return false 之间的区别

"return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码 $("a.toggle").click(function () { $("#mydiv").toggle(); return

浅谈 return false 和preventDefault stopPropagation stopImmediatePropagation 的正确用法

1.使用return false实际上做了3件事:(谨慎使用) event.preventDefault(); event.Propagation(); 停止回掉函数执行并立即返回 2.event.preventDefault()  ----->阻止浏览器继续执行默认行为 3.event.stopPropagation() ----->停止事件冒泡 event bubbling 4. stopImmediatePropagation ------>停止一个事件继续执行 link:http