vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡，很简单，用stop

<div @click="test1()">
   <span @click.stop="test2()">按钮1</span>
   <span>按钮2</span>
</div>

这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。

以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解vue事件对象、冒泡、阻止默认行为
  • vue绑定的点击事件阻止冒泡的实例
赞 (0)

相关推荐

  • 详解vue事件对象、冒泡、阻止默认行为

    整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s

  • vue绑定的点击事件阻止冒泡的实例

    当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc

  • vue中阻止click事件冒泡,防止触发另一个事件的方法

    使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部

  • VUE中v-on:click事件中获取当前dom元素的代码

    在开发中总是忘记,特意在此记录 关键字:   $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • vue中v-for通过动态绑定class实现触发效果

    vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo

  • 在vue中阻止浏览器后退的实例

    如下所示: history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同,同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Vue中的生命周期beforeDestory不触发的问题

    分享一句很有用的经验: 给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed 结束! 补充知识:vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 act

  • vue中实现点击空白区域关闭弹窗的两种方法

    1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div>

  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or

  • vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    一.问题描述: 我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格.那么,在vue,element-ui 组件中,如何实现呢? 二.效果图: 三.实现代码: <el-table-column prop="account" label="银行账号"> <template slot-scope="scope"> <el-input type="text" maxlength=&q

  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    目录 1.弹窗的打开关闭 2. 本地视频资源路径的引入 3. 视频播放完毕自动关闭弹窗 4. 视频在弹窗中自适应大小 参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入的visible值: // 父组件中引用子组件 <video-modal :visible.sync="showVideoModal"> // 子组件中 <

随机推荐