html td双击事件,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);// 执行顺序：由里向外

写在最后

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

相关推荐：