乐趣区

关于javascript:Javascript如何阻止事件传播

jiezi

阻止浏览器默认行为和避免事件流传次要通过先上面两个办法实现

event.preventDefault()：勾销浏览器对以后事件的默认行为，比方点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。

event.stopPropagation()：阻止事件在 DOM 中持续流传，避免再触发定义在别的节点上的监听函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 阻止浏览器默认行为 - 黑马程序员 web 前端培训高手班 http://web.itheima.com</title>
</head>
<body>
    <div id="div2">2
        <div id="div1">1
            <a id="a" href="http://www.itheima.com" target="_blank"> 黑马程序员 </a>
        </div>
    </div>
</body>
<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){alert('d2');
    }
    d1.onclick = function(e){alert('d1');
    }
    a.onclick = function(e){alert('a');
    }
</script>
</html>

未阻止浏览器默认行为和阻止事件流传之前

未阻止之前成果

阻止浏览器默认行为 

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){alert('d2');
    }
    d1.onclick = function(e){alert('d1');
    }
    a.onclick = function(e){alert('a');
        // 阻止浏览器默认行为
        e.preventDefault();}
</script>

因为 e.preventDefault() 阻止了浏览器默认行为，所以点击“黑马程序员”，不会跳转黑马程序员官网。

阻止浏览器行为之后成果

阻止事件流传 

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){alert('d2');
    }
    d1.onclick = function(e){alert('d1');
    }
    a.onclick = function(e){
        // 阻止事件流传
        e.stopPropagation();
        alert('a');
    }
</script>

因为 e.stopProgation() 阻止了事件流传，d1 和 d2 对象绑定的事件不会再触发，间接跳转到了 http://www.itheima.com。

文章转自：http://web.itheimacom

退出移动版