解决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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
vue登录以及权限验证相关的实现
Oct 25 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
桌面中心(一)创建数据库
2006/10/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue脚手架搭建过程图解
2018/06/06 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python3简单实现微信爬虫
2015/04/09 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python3中sys.argv的实例用法
2020/04/24 Python
python合并多个excel文件的示例
2020/09/23 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
党委书记岗位职责
2013/11/24 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
学校搬迁方案
2014/06/15 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2015年重阳节主持词
2015/07/04 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis