解决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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js转义字符介绍
Nov 05 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
Vue.js中的组件系统
May 30 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jquery 手势密码插件
2017/03/17 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python3实现读取chrome浏览器cookie
2016/06/19 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python一些性能分析的技巧
2020/08/30 Python
flask框架中的cookie和session使用
2021/01/31 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
公司费用报销管理制度
2015/08/04 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server