return false影响事件冒泡

来源：互联网发布：mysql insert 编辑：程序博客网时间：2024/06/16 05:09

在编写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;}

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

0 0