Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation

Event.preventDefault() 取消浏览器对当前事件的默认行为。
Event.stopPropagation() 阻止事件冒泡。
Event.stopImmediatePropagation() 阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也能阻止事件的冒泡。

Event.preventDefault

该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

<a id="link" href="http://www.baidu.com">百度一下</a><script>var link = document.getElementById('link');link.addEventListener('click', function(event){console.log(event.cancelable); //trueevent.preventDefault(); //不会跳转});
</script>

Event.stopPropagation

<div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;"><div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我</div>
</div><script>var parent = document.getElementById('parent');var son = document.getElementById('son');parent.addEventListener('click', function(){console.log('parent'); //不触发}, false);son.addEventListener('click', function(event){event.stopPropagation();console.log('son'); //显示son}, false);
</script>

Event.stopImmediatePropagation

 <div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;"><div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我</div>
</div><script>var parent = document.getElementById('parent');var son = document.getElementById('son');parent.addEventListener('click', function(){console.log('parent'); //不触发}, false);son.addEventListener('click', function(event){event.stopImmediatePropagation();console.log('son1'); //显示 son1}, false);son.addEventListener('click', function(event){console.log('son2'); //不触发}, false);
</script>

Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation相关推荐

React学习-event.preventDefault()方法的简单介绍
React学习-event.preventDefault()方法的简单介绍 react官方文档中有这么一段: 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为.你必须显式 ...
深入了解preventDefault与stopPropagation
event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "subm ...
event.stopPropagation/event.preventDefault()/event.cancelBubble等Event属性含义
Event 接口表示在 DOM 中出现的事件. event.bubbles: 返回一个布尔值,表明当前事件是否会向DOM树上层元素冒泡. event.cancelable: 只读属性 cancelab ...
event.stopPropagation和event.preventDefault有什么区别？
他们似乎在做同样的事情--是现代的还是老的? 还是不同的浏览器支持它们? 当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在). (我也return false ,但是我感觉不适用于与no ...
js事件之event.preventDefault()与event.stopPropagation()用法区别
event.preventDefault()将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任 ...
jQuery之防止【冒泡事件】，阻止默认行为【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面两者都可以用 return ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
event.stopPropagation()和event.preventDefault()
阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别 / 编辑删除今天 ...
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
event.preventDefault() 方法可防止元素的默认行为.如果在表单元素中使用,它将阻止其提交.如果在锚元素中使用,它将阻止其导航.如果在上下文菜单中使用,它将阻止其显示或显示.even ...

Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation

Event.preventDefault

Event.stopPropagation

Event.stopImmediatePropagation

Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation相关推荐

最新文章

热门文章