return false影响事件冒泡

在编写zepto, jquery的事件时,回调函数体中不要使用return false,
这将阻止事件冒泡,会导致其他的函数捕捉不到事件。
比如前一阵,某位同事无意中修改了一个tap事件导致该元素无法触发公共的统计事件,而全不知其影响。

栗子在此###

//html:
<a class="related" data-gjalog="ge">一个按钮</a>
//业务代码:
$('.related').on('tap', function(){
   var target_url = $(this).attr('data-targeturl');
   if(!target_url){
       return false;
   }
   $.getJSON(target_url + '&callback=?');
});
//受影响的公共组件:
$('body').on('tap', '[data-gjalog]', function (e) {
    ...
});

解决办法###

在编写zepto, jquery的事件时,只要不是return false, return 任何值都不会阻止事件冒泡;
线上已经修复的方式将return false改成return.
BTW, 采用return来控制条件语句的写法可读性不高,建议使用if, else, 三目运算表达式或改为:

$('.related .recomend3g a').on('tap', function(){
   var target_url = $(this).attr('data-targeturl');
   target_url && $.getJSON(target_url + '&callback=?');
});

Raw Javascript##

延伸实验原生javascript不会受到return false的影响:

var body =  document.getElementsByTagName("body")[0];
var a =  document.getElementsByTagName("a")[0];
    body.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'a'){
        console.log('js raw delegate event');
    }
}
a.onclick = function(){
    console.log('js raw event');
    return false;
}

运行结果:两个回调函数都会完全执行并输出;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,839评论 24 450
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,200评论 0 0
  • 我的家乡 在大山深处 群峰环绕 一水缠绵 别人以为 这是贫瘠的地方 我却觉得 这是世外的桃源 连绵的群山 巍然耸立...
    路雨飞飞阅读 128评论 0 1
  • 1、我们最好的盟友并不是一直支持我们的人,而是那些一开始反对我们,然后又转向支持我们的人。因为不同的思维模式会碰撞...
    维维2016阅读 133评论 0 0
  • 我始终相信 犯贱是普遍真理,你我只是其中之一 每天上班 下班的日子让我觉得很苦逼 我发现花钱像拉稀一样的快,赚钱...
    嗓子里的钩子阅读 274评论 0 0