对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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 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/03 新手入门
奇怪的PHP引用效率问题分析
2012/03/23 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
浅谈PHP封装CURL
2019/03/06 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
python判断字符串是否纯数字的方法
2014/11/19 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
校庆筹备方案
2014/03/30 职场文书
绿色小区申报材料
2014/08/22 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
搬迁通知
2015/04/20 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
详解Python牛顿插值法
2021/05/11 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python