重新认识vue之事件阻止冒泡的实现


Posted in Javascript onAugust 02, 2018

冒泡的表现

近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示:

重新认识vue之事件阻止冒泡的实现

他们的DOM结构如下:

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click="handleClick1"></div>
  </el-col>
  <el-col @click="handleClick2">
  </el-col>
</div>

冒泡在这里的表现就是当用户点击图中事件1或事件2区域时,事件3也会执行。这是因为时间冒泡机制,导致点击'handleClick1'时'handleClick3' 也会响应。在大部分的时候这都是不希望的, 同样我这里也不希望。

看下冒泡的经典描述吧还是

重新认识vue之事件阻止冒泡的实现

图中4,5,6,7步骤就是冒泡阶段。

通用解决办法

事件冒泡了嘛,那就阻止事件冒泡呗。 鉴于不同浏览器阻止事件冒泡方法不一样,建议手写一个事件阻止冒泡方法.

function stopPropagation(event){
  var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
  if(window.event){    //这是IE浏览器
    e.cancelBubble=true;
  }else if(e && e.stopPropagation){   //这是其他浏览器
    e.stopPropagation();//阻止冒泡事件
  }
}

<button onclick="stopPropagation(event)"> 按钮 </button>  // 使用

vue中解决办法

上述兼容方法,针对 event 和 停止冒泡方法均做了兼容。 但是在vue中需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。如:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
 Submit
</button>

// ...
methods: {
 warn: function (message, event) {
  // 现在我们可以访问原生事件对象
  if (event) event.preventDefault()
  alert(message)
 }
}

因此这里我们可以简化一下上述停止冒泡方法:

function stopPropagation(event) {
  if(event) {
    event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
  }
}

evnet 为 $event

vue中处理冒泡标准姿势

事件修饰符

Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的。这些事件修饰符主要有以下几个:

  1. stop
  2. prevent
  3. capture
  4. prevent
  5. self
  6. once
  7. passive

看到没有,第一个'stop'就是我们想要的!

这些修饰符正是为了解决这些问题而生的。也就说我们只需要在模板中这样写就搞定停止冒泡了。

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click.stop="handleClick1"></div>
  </el-col>
  <el-col @click.stop="handleClick2">
  </el-col>
</div>

很完美有没有,这就不用在事件响应逻辑中去处理dom事件细节了。

除 冒泡之外,vue提供的修饰符还有这些功能。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
javascript自定义的addClass()方法
May 28 Javascript
javascript拖拽应用实例
Mar 25 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 #Javascript
解决vue router组件状态刷新消失的问题
Aug 01 #Javascript
Promise.all中对于reject的处理方法
Aug 01 #Javascript
详解es6超好用的语法糖Decorator
Aug 01 #Javascript
Vue Router去掉url中默认的锚点#
Aug 01 #Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 #Javascript
node.js遍历目录的方法示例
Aug 01 #Javascript
You might like
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
大学生职业生涯设计书
2014/01/02 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
市场部管理制度
2014/02/02 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
大国崛起日本观后感
2015/06/02 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Go 自定义package包设置与导入操作
2021/05/06 Golang