tr td同时添加点击事件

 

1.情景展示

　　tr td同时添加点击事件，互不影响，如何实现？

　　如上图所示，tr、td、input标签都添加了点击事件，在input框进行点击时，分别执行的是：input，td，tr三级标签的点击事件，这绝对不是我们想要的效果，我们只想执行input的点击事件，如何实现？

2.原因分析

　　这个流程图能够很好的解释，为什么执行了3次点击事件。

　　同一事件的执行顺序

　　DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 

　　这两个方法都需要三个参数，分别为：事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。　　

　　由上图可知捕获过程要先于冒泡过程

　　当第三个参数设置为true就在捕获过程中（由里向外）执行，反之就在冒泡过程（由外向里）中执行处理函数。 

3.解决方案

　　如上图所示，想要阻止点击事件想上执行，就要阻止向上冒泡。

　　在需要阻止向上冒泡的点击事件里添加如下代码，即可阻止向上冒泡。

// 阻止向上冒泡
window.event? window.event.cancelBubble = true : e.stopPropagation();
alert('文本框');

4.拓展

// 监听点击事件
window.addEventListener("click",function(){
    // html元素有点击事件的话，这里最后执行
    // 没有绑定点击事件，点击时，会执行这里
},false);// 执行顺序：由里向外

　　

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页