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

執行結果：兩個回撥函式都會完全執行並輸出；