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;
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值