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);// 执行顺序:由里向外
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/12785432.html