首页 > 其他 > 详细

vue阻止事件冒泡和默认事件

时间:2021-04-08 10:20:40      阅读:17      评论:0      收藏:0      [点我收藏+]

原生js取消事件冒泡

try{
  e.stopPropagation(); // 非IE浏览器
}
catch(e){
  window.event.cancelBubble = true; // IE浏览器
}

原生js阻止默认事件

if ( e && e.preventDefault ) {
  e.preventDefault(); // 非IE浏览器
} else {
  window.event.returnValue = false; // IE浏览器
}

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

vue.js阻止默认事件

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

vue.js阻止事件冒泡也取消默认事件

<div class="parent-wrapper" @click.stop.prevent="clickWrapper">点这里</div>

总结

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
 
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>


vue阻止事件冒泡和默认事件

原文:https://www.cnblogs.com/zjianfei/p/14630317.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!