重新认识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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
前台js调用后台方法示例
Dec 02 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
小程序实现页面顶部选项卡效果
Nov 06 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 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
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
清除输入框内的空格
2016/12/21 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
原生js实现瀑布流效果
2020/03/09 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python实现装饰器、描述符
2018/02/28 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python批量图片处理简单示例
2019/08/06 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
投标诚信承诺书
2014/05/26 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2015年国庆节寄语
2015/08/17 职场文书
学前班教学反思
2016/02/24 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Golang连接并操作MySQL
2022/04/14 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS