您现在的位置是:首页 > Javascript
当前栏目
vue.js中实现阻止事件冒泡
2023-02-18 15:36:56 时间
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
阻止click事件冒泡(防止触发另一个事件)的方法
使用vue阻止子级元素的click事件冒泡。简单得:可以直接用stop
<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div>
这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。
方法二
可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件
@click="_stopPropagation($event)" methods:{ _stopPropagation(ev){ var _this = this; ev.stopPropagation(); }, }
相关文章
- JSP开发
- JSP 生命周期
- 详解JS中 call 方法的实现
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
- jsonp跨域+ashx(示例)
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
- 使用egg.js开发后端API接口系统
- JavaScript 里三个点 ...,可不是省略号啊···
- ASP.NET Core project.json imports 是什么意思?
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
- ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
- tsconfig.json在配置文件中找不到任何输入,怎么办?
- C#开发微信门户及应用(40)--使用微信JSAPI实现微信支付功能
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- ASP.NET Core 返回 Json DateTime 格式
- jQuery.template.js 简单使用