JavaScript之阻止事件冒泡
什么是JS事件冒泡?:
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
阻止冒泡的方法如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <input type="button" id="btn" value="点击">> </div> <script> /** * 当我们点击button时div也被执行了,但我们并没有点击div,这也就是事件的冒泡问题,从下往上执行 * 我们可以使用stopPropagation()方法阻止这样的发生 */ document.getElementById("btn").addEventListener("click",fun) document.getElementById("div").addEventListener("click",sun) function fun(e) { alert("button"); e.stopPropagation();//阻止冒泡问题的发生 } function sun() { alert("div"); } </script> </body> </html>