解决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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 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
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
JS array 数组详解
2009/03/22 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
动态创建类实例代码
2009/10/07 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python破解同事的压缩包密码
2020/10/14 Python
python 装饰器的基本使用
2021/01/13 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
如何进行Linux分区优化
2016/09/13 面试题
2014年基层党组织公开承诺书
2014/03/29 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
药店促销活动总结
2014/07/10 职场文书
护理实习生带教计划
2015/01/16 职场文书
董事长致辞
2015/07/29 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers