对vue中的事件穿透与禁止穿透实例详解


Posted in Javascript onOctober 28, 2019

在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop

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

js的解决办法是,直接在事件的方法中添加event.stopPropagation()

//html
<button>关闭</button>
//js
$("button").on("click",function(){
 event.stopPropagation()
})

还有一种情况就是,设计非要把蒙层放在最上层,明明遮住了按钮,他不管,他就觉得这么放好看,那怎么办?好在前端足够强大,能够解决这个问题,就是css中的一个pointer-events

//据网传,除了none/auto以外,其他都是用在svg项目中

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

<button>确认</button>
 <div class=“cover”></div>
 .cover{
 position: fixed;
 width: 100%;
 height: 110%;
 z-index:999;
 //给遮罩层上添加这个属性即可,这是就可以穿透遮罩层,触发到确认按钮了
 pointer-events:none;
 }

以上这篇对vue中的事件穿透与禁止穿透实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
Javascript玩转继承(一)
May 08 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue h5移动端禁止缩放代码
Oct 28 #Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 #Javascript
element-ui 本地化使用教程详解
Oct 28 #Javascript
vue 全局环境切换问题
Oct 27 #Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
php include类文件超时问题处理
2015/02/06 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
浅析Python中signal包的使用
2015/11/13 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
大学生实习证明范本
2014/01/15 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
母亲节主题班会
2015/08/14 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
Java对文件的读写操作方法
2022/04/29 Java/Android