解决VUE框架 导致绑定事件的阻止冒泡失效问题


Posted in Javascript onFebruary 24, 2018

前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效。

而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。

此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()'

.stop

.prevent

.capture

.self

.once

<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

以上这篇解决VUE框架 导致绑定事件的阻止冒泡失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
JS抛物线动画实例制作
Feb 24 #Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 #Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 #Javascript
vue watch监听对象及对应值的变化详解
Feb 24 #Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 #Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 #Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
调整PHP的性能
2013/10/30 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python黑魔法之参数传递
2016/02/12 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python 删除非空文件夹的实例
2018/04/26 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
学校岗位设置方案
2014/01/16 职场文书
九年级历史教学反思
2014/01/27 职场文书
物业总经理岗位职责
2014/02/28 职场文书
经济担保书范文
2014/04/02 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
音乐剧猫观后感
2015/06/04 职场文书
初中生物教学反思
2016/02/20 职场文书