點擊事件在label標簽執行2次解決辦法

 

這是前段時間的事，今天有人問我，便想着要記下來，以下敘述不僅針對普通的click事件也適用，對於使用哪種框架也可以。

事件傳遞方式有2種：事件捕獲和事件冒泡。事件會從父元素傳到子元素，再從子元素傳到父元素，如果事件綁定發生在父元素傳到子元素的過程中，則稱為事件捕獲傳遞，如果事件綁定發生在子元素傳到父元素的階段，則稱為事件冒泡傳遞。

 

第一種解決辦法：

1：e.stopPropagation；

一般情況都是使用的這個，節點上處理該事件的處理程序將被調用，事件不會影響其他節點。

2：e.preventDefault；

通知瀏覽器不要執行與事件關聯的默認動作。

$('input').click(function(e){
    console.log('input_click');
    e.stopPropagation();//阻止其繼續冒泡
})

 

 

第二種解決辦法：

用時間戳來解決，我平常多於這個方法，

因為e.stopPropagation有的時候在繁雜函數或者函數與函數直接有共同的關聯會影響其操作元素。

如下：

 

 var tab = $('#entr_click1,#entr_click2');//獲取ID
    tab.click(function(){
        var index = tab.index(this);
        var now = +new Date();
        if (now - evTimeStamp < 100) {
           //操作事件元素......
        }
        evTimeStamp = now;
    });