脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue绑定的点击事件阻止冒泡

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

 更新时间：2018年02月08日 09:33:13   作者：LLDD2014425  
下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

当我们在使用vue做项目时，经常用到点击事件的绑定，但是我们绑在一个div上，里面的其他按钮（如删除、修改）等按钮也会加载这儿div的点击事件，而事实我们不需要，如何解决：

首先我们来区分事件冒泡、事件捕获是什么

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

<span style="font-family:SimSun;font-size:14px;">  <div class="tableContent" v-for="(items,index) in dataList" v-on:click="changeBacks(items)" :class="{tableContentHover:items.changeBack}"> 
   <ul> 
    <li><span><label :class="{labelChange:items.changeBack}">√</label></span><label v-html="items.name"></label> </li> 
    <li><label v-html="items.sex"></label></li> 
    <li><label v-html="items.tel"></label></li> 
    <li> 
     <label v-html="items.age" v-if="items.age<=20" v-bind:class="'black'"></label> 
     <label v-html="items.age" v-else-if="items.age<=40" v-bind:class="'green'"></label> 
     <label v-html="items.age" v-else-if="items.age<=60" v-bind:class="'blue'"></label> 
     <label v-html="items.age" v-else-if="items.age<=80" v-bind:class="'purple'"></label> 
     <label v-html="items.age" v-else v-bind:class="'red'"></label> 
    </li> 
    <li><label v-html="items.profession"></label></li> 
    <li><button v-on:click.stop="deleteThis(index)">删除</button></li> 
   </ul> 
  </div></span>

这个时候在button的点击事件加上.stop，就可以解决以上问题。

以上这篇vue绑定的点击事件阻止冒泡的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • vue中倒计时组件的实例代码

    vue中倒计时组件的实例代码

    这篇文章主要介绍了vue中倒计时组件的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07
  • 关于Uncaught(in promise)TypeError: list is not iterable报错解决

    关于Uncaught(in promise)TypeError: list is not iterable报错

    这篇文章主要给大家介绍了关于Uncaught(in promise)TypeError: list is not iterable报错的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题

    vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题

    这篇文章主要介绍了vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 详解vue slot插槽的使用方法

    详解vue slot插槽的使用方法

    本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue自定义正在加载动画的例子

    vue自定义正在加载动画的例子

    今天小编就为大家分享一篇vue自定义正在加载动画的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • VueCli3中兼容IE11配置的艰苦历程

    VueCli3中兼容IE11配置的艰苦历程

    这篇文章主要介绍了VueCli3中兼容IE11配置的艰苦历程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • 详解vue 祖先组件操作后代组件方法

    详解vue 祖先组件操作后代组件方法

    最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下
    2022-11-11
  • Vue3+Vue Router实现动态路由导航的示例代码

    Vue3+Vue Router实现动态路由导航的示例代码

    随着单页面应用程序(SPA)的日益流行,前端开发逐渐向复杂且交互性强的方向发展,在这个过程中,Vue.js及其生态圈的工具（如Vue Router）为我们提供了强大的支持,本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航,需要的朋友可以参考下
    2024-08-08
  • vue3中sync修饰符的使用详解

    vue3中sync修饰符的使用详解

    .sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下
    2023-10-10

最新评论