当前位置: 首页 > 编程笔记 >

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

暨正真
2023-03-14
本文向大家介绍对vue中的事件穿透与禁止穿透实例详解,包括了对vue中的事件穿透与禁止穿透实例详解的使用技巧和注意事项,需要的朋友参考一下

html" target="_blank">开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,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中的事件穿透与禁止穿透实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍关于vue组件事件属性穿透详解,包括了关于vue组件事件属性穿透详解的使用技巧和注意事项,需要的朋友参考一下 组件事件属性穿透 属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 注意: 由于在这个组件中input并不是根元素,默认情况下父组件的不被

  • 本文向大家介绍div等元素如何阻止点击穿透和实现点击穿透?相关面试题,主要包含被问及div等元素如何阻止点击穿透和实现点击穿透?时的应答技巧和注意事项,需要的朋友参考一下 pointer-events: none; 允许点击穿透 阻止穿透 在js的点击事件里面添加这句话,阻止冒泡 event.stopPropagation();

  • 本文向大家介绍Vue中的scoped实现原理及穿透方法,包括了Vue中的scoped实现原理及穿透方法的使用技巧和注意事项,需要的朋友参考一下 何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如

  • 内网穿透是我们在进行网络连接时的一种术语,也叫做NAT穿透,内网穿透的功能就是,当我们在端口映射时设置时,内网穿透起到了地址转换的功能。 内网穿透的原理很简单的说就是: 两台计算机A和B都处于不同的局域网中,A想要访问B, 就需要通过一台服务器做桥接的,桥接的方式有两种,一种是服务器相互转发流量 到A和B,另一种是告诉对方公网IP地址,自己充当一个介绍人的角色, 专业术语叫DNAT目标地址转换。

  • 本文向大家介绍css穿透属性有哪些?相关面试题,主要包含被问及css穿透属性有哪些?时的应答技巧和注意事项,需要的朋友参考一下 /* Keyword values / pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; / SVG only / pointer-events: visibleFill

  • 我正在我的游戏中实现碰撞检测,并有一点麻烦,理解如何计算矢量,以固定我的形状重叠碰撞。 举个例子,我有两个方块。和。对于这两者,我都知道它们的、、和。但是是移动的,所以他有一个速度和一个速度。假设我每秒更新一次游戏。我已经说明了下面的情况。 现在,我需要一个公式来得到矢量来固定重叠。如果我将这个向量应用到红色方块(),它们就不会再重叠了。这就是我想要达到的目标。 谁能帮我算出计算向量的公式吗? 如