首页>>前端>>JavaScript->Javascript怎么阻止事件传播?

Javascript怎么阻止事件传播?

时间:2023-11-30 本站 点击:0

阻止浏览器默认行为和防止事件传播主要通过先下面两个方法实现:

1、event.preventDefault(): 取消浏览器对当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。

2、event.stopPropagation(): 阻止事件在DOM中继续传播,防止再触发定义在别的节点上的监听函数。

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

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

阻止浏览器默认行为

<script>vard2=document.getElementById('div2');vard1=document.getElementById('div1');vara=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>vard2=document.getElementById('div2');vard1=document.getElementById('div1');vara=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。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/3907.html