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>

 

posted @ 2018-07-23 08:49  送你一颗糖  阅读(140)  评论(0)    收藏  举报