码迷,mamicode.com
首页 > 其他好文 > 详细

stopImmediatePropagation&stopPropagation 区别

时间:2014-10-08 23:36:17      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:io   使用   ar   java   strong   2014   c   问题   on   

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 区别

标签:io   使用   ar   java   strong   2014   c   问题   on   

原文地址:http://my.oschina.net/ski/blog/325022

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!