对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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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
一个oracle+PHP的查询的例子
2006/10/09 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php表单提交实例讲解
2015/11/12 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python xpath获取页面注释的方法
2019/01/14 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python判断变量是否为列表的方法
2020/09/17 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
校长新学期寄语2016
2015/12/04 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
python处理json数据文件
2022/04/11 Python