重新认识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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
JS常用表单验证方法总结
May 22 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
js实现筛选功能
Nov 24 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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
django定期执行任务(实例讲解)
2017/11/03 Python
Python socket实现简单聊天室
2018/04/01 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
银行委托书范本
2014/04/04 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2014年客房部工作总结
2014/11/22 职场文书
企业投资意向书
2015/05/09 职场文书
优秀员工演讲稿
2019/06/21 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js