首页 > 其他分享 >vue.js中实现阻止事件冒泡

vue.js中实现阻止事件冒泡

时间:2022-10-22 12:34:42浏览次数:56  
标签:触发 vue 元素 js 阻止 事件 click 冒泡

当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加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();      
    },
}

 

标签:触发,vue,元素,js,阻止,事件,click,冒泡
From: https://www.cnblogs.com/taoshihan/p/16815852.html

相关文章

  • Vue 前端配置跨域
    目录Vue前端配置跨域添加vue.config.js文件修改main.js好文推荐Vue前端配置跨域Nginx、后端网关层已经全部配置跨域,VUE前端仍然会偶发性发生跨域问题,故此决定,前端也进......
  • 【前端】学习了一段时间的vue,总结一下Vue书写规范
    (学习了一段时间的vue,总结一下Vue书写规范)命名规范在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,甚至过......
  • js 变量作用域与解构赋值| 22
    在JavaScript中,用​​var​​申明的变量实际上是有作用域的。如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量:'usestrict';functionf......
  • js装饰器
    在一个对象中绑定函数,称为这个对象的方法。在JavaScript中,对象的定义是这样的:varxiaoming={name:'小明',birth:1990};但是,如果我们给​​xiaoming​​绑定一个......
  • js map和reduce
    map举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组​​[1,2,3,4,5,6,7,8,9]​​上,就可以用​​map​​实现如下:由于​​map()​​方法定义在JavaScr......
  • 解决vue请求springBoot项目时跨域问题
    由于浏览器同源策略的限制,如果请求url的协议、域名、端口号中有一项不同,就会产生跨域问题当我们在本地开始前后端分离项目时,必然会启动不用的端口,所以就会发生跨域问题比......
  • 前端Vue2-Day56
    消息订阅与发布pubsub:实现任意组件间通信使用步骤:①安装pubsub-js:npmipubsub-js②引入:importpubsubfrom'pubsub-js'③订阅消息:使用pubsub自带的subscribe方法......
  • Vue笔记4 过滤器、表单v-model\高级函数
      item.price|showPrice过滤器用法              -------------------------------------------------------  --------------......
  • vue 中 slot 的使用方式,以及作用域插槽的用法
     使用场景:vue提供组件插槽能力,允许开发者在封装组件时,把不确定的部分定义为插槽‘<slot>夹着内容默认显示内容,如果不给插槽slot传东西,则使用<slot>夹着的内容在......
  • Newtonsoft.Json笔记 -JToken、JObject、JArray详解
    在原来解析json数据是,一般都是用反序列化来实现json数据的解读,这需要首先知道json数据的结构并且建立相应的类才能反序列化,一旦遇到动态的json数据,这种方法就不使用。为了......