点击事件在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;
    });