首页 > 代码库 > stopImmediatePropagation&stopPropagation 区别

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 = http://www.mamicode.com/$(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="http://www.mamicode.com/至今">至今</a>
                                            </li>
                                        </ul>
                                        <input type="hidden" name="endMonth" />
                                    </dd>
                                </dl>

stopImmediatePropagation&stopPropagation 区别