事件多次执行导致失效解决方法

引言

　　有时候会遇到事件重复执行导致事件失效的情况，而这种情况由方法挂载类选择器导致，这里提供两种解决方案。

举例

　　多次执行又能导致事件失效的情况有一个很常见的方法： toggleClass()

　　debug调试：第一次执行添加了类，重复执行导致第二次又给移除了，这样导致跟事件没执行一样，没有任何效果，看例子：

html：

　　　　　　　　　　　　<label class="btn btn-default btn-white" data-rel="tooltip" data-placement="bottom" title="下划线">
                        <i class="icon-only ace-icon fa fa-underline bigger-110"></i>
                        <input type="checkbox" value="3">
                    </label>

js：

        $(".btn-group label.btn").click(function(e){
        　　// doSomething
　　　　　　　console.log(e.target);

    　　 })    　　

　　debug过程中发现事件执行了两次，查看控制台：

　　

　　可以看到 label 里面的 i 和 input都导致了时间触发

解决方法

　　1.阻止事件派发：stopPropagation() 方法

　　w3c上对此方法的解释：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

　　个人理解：感觉文档解释有点抽象，我个人理解为当我们把事件绑定到父级元素上而父级元素里面有多个子元素时，有可能（经过测试发现不一定会触发）会导致事件重复执行，

　　　　　　　而采用 stopPropagation() 方法 在执行后不再派发给其他子元素。

　　2.事件源判断：e.target()

　　target() 方法可以帮我们取到js触发对象，如果这里input不是必要的，删除就可以了，如果是必要的，那么采用第一种方法。

结语

　　本次记录结束。