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


Posted in Javascript onFebruary 08, 2018

当我们在使用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绑定的点击事件阻止冒泡的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 #Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 #Javascript
Ionic学习日记实现验证码倒计时
Feb 08 #Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Javascript中replace()小结
2015/09/30 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
js中的闭包学习心得
2018/02/06 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
Python CSV模块使用实例
2015/04/09 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python导入坐标点的具体操作
2019/05/10 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python图像读写方法对比
2020/11/16 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
新大陆软件面试题
2016/11/24 面试题
应届生法律顾问求职信
2013/11/19 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
php访问对象中的成员的实例方法
2021/11/17 PHP