首页 > 代码库 > 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 区别
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。