1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JS中如何阻止默认行为和冒泡事件

JS中如何阻止默认行为和冒泡事件

时间:2018-07-13 07:15:48

相关推荐

JS中如何阻止默认行为和冒泡事件

<a href="">百度跳转</a>

超链接的默认行为是点击百度跳转就会跳转到百度搜索页面,现在我们不想要这个默认的跳转事件

<script>var a=document.querySelector('a')a.addEventListener('click',function(e){(1) e.preventDefault()(2)e.returnValue=false})(3)a.onclick=function(e){return false;}</script>

综上 阻止默认事件,一共有3种方式

//谷歌及IE8以上e.preventDefault();//IE8及以下window.event.returnValue = false;//无兼容问题(但不能用于节点直接onclick绑定函数,只限于传统方式)return false;

<div class="box">父元素<div class="one">子元素</div></div>

var box=document.querySelector('.box')var one=document.querySelector('.one');box.addEventListener('click',function(){console.log('我是父元素');})one.addEventListener('click',function(e){console.log('我是子元素');})

此时我们点击子元素会触发父元素,但我们此时不想要这个事件冒泡,我们只想要点击谁就触发谁,这时我们给子元素添加阻止冒泡事件

one.addEventListener('click',function(e){console.log('我是子元素');e.stopPropagation()//ie 6.7.8e.cancelBubble=true})

综上所述:

阻止默认行为

一般用e.preventDefault()但是IE8及以下要用e.returnValue=false传统方式直接用return false;

阻止冒泡事件

一般方法e.stopPropagation(),/IE浏览器(IE11)以下使用e.cancelBubble = true

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。