菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
197
0

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

原创
05/13 14:22
阅读数 88701
//阻止单击事件继续传播
<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>确认<www.cppcns.com/button>
 <div class=“cover”></div>
 .cover{
 position: fixed;
 width: 1http://www.cppcns.com0www.cppcns.com0%;
 height: 110%;
 z-index:999;
 //给遮罩层上添加这个属性即可,这是就可以穿透遮罩层,触发到确认按钮了VmyBELt
 pointer-events:none;
 }

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

本文标题: 对vue中的事件穿透与禁止穿透实例详解
本文地址: http://www.cppcns.com/wangluo/javascript/282858.html

发表评论

0/200
197 点赞
0 评论
收藏