js事件穿透上层触发下层事件

最新推荐文章于 2024-07-23 19:42:13 发布
最新推荐文章于 2024-07-23 19:42:13 发布
阅读量2.1k 收藏 2
点赞数 3
分类专栏： 前端学习经历 文章标签： html5 css javascript 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyv1/article/details/108566775
版权

我是在做一个带遮罩边框时候需要用到

下面是效果图
在这里插入图片描述
可以看到边边有个边框，这是用一个img实现的，直接宽高一样盖在上面。
虽然看上去是透的实际上上面有一层img只是透明而已，这个时候要是需要触发底层swiper事件就没办法

css里有一个专门屏蔽事件的属性

pointer-events: none;

默认是是触发，写上这个之后就不会触发事件了
这样就能正常触发swiper的事件了

sunyv1
关注
专栏目录
js 弹框 底层穿透问题
etemal_bright的博客
06-11 836
点击 发送邮箱按钮 出现弹框 使用fixed定位，当输入邮箱，软键盘被拉起，输入完毕，键盘收起，ios机型会导致键盘弹起的时候 底层页面的高度向上推 键盘收起 高度没有回来 导致点击探层的确定按钮 元素错位。 解决方法 键盘收起时 底层高度回到顶部 在这里插入图片描述 ...
子元素触发父元素的鼠标事件及上层元素遮挡下层元素的鼠标事件
代码小司机
10-18 1131
背景介绍：使用 D3 绘制业务所需的展示图， 其中一个功能是实现在长方形框中添加文本内容（如图1所示），并且设置鼠标事件，当移入长方形区域时，显示一个弹出框展示详细内容（如图2所示)，移出后隐藏弹出框。 问题描述：鼠标移入到长方形空白区域，事件正常执行，而当鼠标移动到text上则事件无法触发。 ...
js点击事件穿透
Mh_ui的博客
11-17 9040
<div class="out" @click="out()"> <div class="in" @click="in()"></div> </div> // 穿透点击（点击in的区域触发out） .in { pointer-events: none; } // 阻止穿透 （点击in的区域不会触发out） function in () { event.stopPropagation(); } ...
【JavaScript】点击穿透
小秀的博客
07-23 388
点击穿透是指在某些场景下，⽤户在快速点击⻚⾯元素时，由于某些原因（例如⽹络延迟），在前⼀个元素上的点击事件还没有完成时，下⼀个元素的点击事件就已经触发了，导致⽤户感。觉到⻚⾯点击⽆效或者出现异常。
JS/jQuery点击某元素之外触发事件
weixin_30794491的博客
10-28 702
JQuery // 第一步：点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件；“); }); // 第二步： 将某元素的位置设为不可点击；(此部分点击不会触发点击事件) $("#canotElem").click(function(){ ...
js "多线程" 与 异步调用 EventLoop 机制
weixin_30807779的博客
03-06 401
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 当然也并不是多线程就是好的, 多线程虽然可以共享全局变量, 但是很容易造成问题, 因此需要原子锁, 互斥锁等保证一个变量不能被多个线程同时访问, js引擎是单线程运行的可能跟他的设计初衷也是有关的, 他并不需要那么多线程, 浏览器内核是多线程,至少...
js 冒泡事件
qq_42467563的博客
10-23 251
说明：当下层元素和上层元素支持同一事件，当上层事件触发时，下层事件也触发，这就叫事件冒泡。 取消事件冒泡：ev.cancelBubble = true &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&amp
Vue.js基础总结
m0_37643322的博客
10-09 1052
1.认识Vuejs Vue是一个渐进式框架, 什么是渐进式的呢? 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 Vue有很多特点和Web开发中常见的高级功能 解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM 2.Vue初体验 3.Vue中的MVVM View层 视图层前端开发中, 通常就是DOM层主要的作用是给用户展示各种信息 Model层 数据层数据可能是我们固定的死数据, 更多的是来自我们的服务器, 从
对vue中的事件穿透与禁止穿透实例详解
10-16
有时候，我们可能会遇到事件穿透的问题，即在页面上层的元素被点击时，同时也触发了下层元素的事件。这主要是因为浏览器默认的行为，事件会从捕获阶段开始，一直传递到冒泡阶段。Vue.js 提供了优雅的方式来解决这个...
MouseArea 的 Click / Hover 事件穿透
04-16
这些事件通常按照它们被触发的顺序进行处理，但有时我们希望点击事件能够穿透到下方的`MouseArea`，而不是只被最上层的`MouseArea`捕获。要实现这一功能，我们可以设置`MouseArea`的`propagateComposedEvents`属性为...
JS中的事件传播机制
webchang的博客
12-03 538
JavaScript中事件传播机制的详解分析
小程序 防止点击事件穿透
最新发布
08-23
这是因为在触摸屏上，手指触摸屏幕到移开，会有一个时间差，如果上层元素在这个时间差内消失，点击事件会“穿透”到下层元素。 为了解决这个问题，可以采取以下几种策略： 1. 使用`catchtouchmove`事件：在弹出层...
JS 弹出窗口，底层画面置灰且不能操作
weixin_44084713的博客
02-20 1953
方法一： 转载地址 <html> <head> <title>弹出一个窗口后，后面的层不可操作</title> <script> function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style.display="block"; //显示隐藏层 hidebg.style.height=document.body.c
JS中事件穿透深度剖析与多种解决方案
cxu123321的博客
06-05 4675
JS中事件穿透深度剖析与多种解决方案 datura_lj 2018.06.25 03:49:45字数 839阅读 2,113 一、问题引出 最近项目开发过程中，在ios环境下。双击（doubletap）上层元素（固定定位fix），偶尔会触发下层（瀑布流中）路由跳转。 经过部门老大指导，才了解到这个现象叫做“事件穿透”。再此俺决定研究下为什么？ 二、事件来源 1. PC端 电脑上一般是鼠标操作，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click.
原生JS遮罩层
weixin_44543312的博客
02-21 1104
开发工具与关键技术：DW JavaScript 作者：梁茵茵 撰写时间：2019年2月20日 听到“遮罩层”这个词顾名思义大家都知道最少也要有两层，上面一层是遮罩层，下面一 层是被遮罩层。这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。 ...
实现滚动穿透，保留原本元素的事件，仅实现滚动穿透
qq_46149597的博客
12-15 902
这里滚动穿透的核心就是： 1、position: fixed;保证元素覆盖父级 2、pointer-events: none;取消这个元素的事件实现事件穿透，但因为pointer-events没有单独指定某个事件，所以要js支持 3、监听鼠标滚轮事件，滚动时才添加pointer-events: none;，不滚动就取消添加。
JavaScript---移动端点击click穿透，fastclick解决方案
COCOLI_BK的博客
01-16 1770
1. 引入fastclick插件监听全局click事件，移动端click点击事件穿透的问题。(一般不采用，这种比较绝对~)如何使用插件FastClick。
JS中事件委托或事件代理
cxx4220的博客
03-22 583
概述 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div&gt;ul&gt;li&gt;a;比如给最里面的a加...
一文教你如何用JS代码来操作元素拖拽移动的效果
SuBaijiu的博客
11-12 3593
一文教你如何用JS代码来操作元素拖拽移动的效果
js防止事件穿透
05-26
3. pointer-events：CSS属性，可以设置元素是否能够被鼠标事件触发，可以设置为 none 来禁止鼠标事件。 示例代码： ```html <button>Click Me ``` ```css .parent { background-color: #f5f5f5; padding...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值