div层级太高,事件穿透

2024-08-31

实现多层DIV叠加的js事件穿透

前几天做的一个功能:在地图上加载标注,这个标注是列表,就直接放的 DIV. 后来发现,当鼠标在这个标注上面的时候,滚动鼠标滚轮,地图的缩放功能失效. 想了下,应该是最上面的标注 DIV 拦截了滚轮滚动事件.那就禁掉最上层标注 DIV 的事件. 这里对其深入了解,也就是事件的穿透.下面这篇文章作为参考. 原文: https://www.cnblogs.com/DarkMaster/p/7747480.html

微信小程序避坑指南——echarts层级太高/层级遮挡

问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图: 解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能): 第一步:wxml  <ec-canvas id="storeChart" canvas-id="storeChart" ec=&

[原创]实现多层DIV叠加的js事件穿透

Flash里面有个很好的特性是,一个容器里,不存在实际对象的部分,不会阻拦鼠标事件穿透到下一层. 前端就不一样了,两个div层叠以后,上层div会接收到所有事件(即使这个div里面内容是空的,没有任何实际对象),下层div什么事件都接不到. 举个例子: 这个示意图中 C方块在A容器中(A容器边框为红色) D方块在B容器中(B容器边框为绿色) A B部分重叠,B在上层. 不做任何处理的话,C方块永远无法被点到,因为B把它盖住了. 下面,我将给出一种方案,在不改变页面结构的情况下,让CD都能得到正常

微信小程序echarts层级太高

项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和cover-image替换tab的view后,可以解决以上的问题.  <cover-view class="tabbar-con"> <cover-view class="{{villageIs?'nav-btn-h

embed标签的flash层级太高问题

因为客户要求,项目得兼容IE的兼容模式页面到了flash都会遮挡底部悬浮的导航. 改变浮动窗口和embed的层级还是不可以.应该不是层级的关系. 最后百度解决方案:在embed标签内添加了wmode="transparent"属性代码如下: <embed class="gen-flash" src="../assets/video/gen.swf" width="100%" wmode="transpare

embed 层级太高

它怎么就好了,凭什么就好了.为什么就好了.我到底当时是哪里写错了.怎么个情况兼容Firefox ,IE的flash透明和flash置底代码 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockw ave/cabs/flash/swflash.cab#version=6,0,29,0" wid

解决微信小程序textarea层级太高遮挡其他组件的问题

<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_textarea' placeholder='请说明人员调用具体原因' bindinput="input_remark" value='' /> </view> <cover-view class='fix_bottom bar bottomfix shadow ju

大事记 - 安卓微信浏览器 video 标签层级过高

// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. // 最近遇到微信端的这个问题,非常让人头疼,正好有小伙伴和我聊到面试经验,灵机一动,<大事记>由此而生问题描述: 在安卓系统的微信浏览器里面,<video> 标签触发了 play() 事件,即开始播放之后 <video> 标签的层级会变成 MAX 级别,无论如何设置 z

支持事件穿透？使用pointer-events样式

使用绝对定位元素,让元素A完全盖住元素B时,如何通过元素A来响应元素B的事件呢? 上图可以用下面的SVG代码来实现: <svg width="200" height="180"> <rect x="50" y="50" width="50" height="50" fill="#f34b5b" onclick="alert('Clicked

手机端 zepto tap事件穿透

什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致现象原因:zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用户手的接触屏

DIV使用tabindex获得事件详解移动div

添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product"></div> 可以获取焦点事件(blur) 1 <div class="wl-product" id="wl-product" tabindex='-1'></div> 具体详解: 先看:W3C关于onfocus的部分

iOS之事件穿透

前言小伙伴们在开发中是否遇到过这样的需求呢,一个控件的某个部分被另外一个控件遮挡住,当点击这个重叠部分时,需要响应被遮盖控件的点击事件,就如下图所示当我们点击区域3时,响应蓝色按钮的点击事件,点击区域1和2时,响应红色按钮的点击事件,对于区域1和3没什么好说的,那如何让红色按钮响应区域2的点击呢?这就是笔者今天要讲的内容. 事件传递大家应该都知道,事件从应用程序开始,按照从上到下的顺序(UIApplication -> UIWindow -> rootViewController -

vue中阻止事件穿透的方法

默认情况下,事件在h5页面会穿透传递,比如一div里面套一个div,点击上层div,下层div也会响应要阻止事件穿透,使用event.stopPropagation(); 代码示例: <div @click="testout($event)> <div @click="testin($event)"></div> </div> ....... testin(event) { ...... event.stopPropagati

div+css:两个div并排等高 (table-cell)

两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left, .right { display: table-cell; border: 1px solid #f40; } </style> </head> <body> <div cla

并列div自动等高

并列div自动等高方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>完美的DIV三行三列自适应高度布局&

table 与 div 固定宽高问题

div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{table-layout:fixed;width:200px;height:200px; }td {width:100px;height:200px;overflow:hidden;} 这个只能固定td的宽度,而高度随内容增加而增高:若也要固定其高度,则需要在td中嵌套使用div,包住content,

div 固定宽高水平垂直居中方法

div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图情况一(单位是px时): 只需要用绝对定位到屏幕中间,然后利用margin-left和margin-top取值就可以实现. <style type="text/css"> .a { border: 1px solid #00caca; width: 900px; height: 500p

Atitit. 最佳实践 QA----减少cpu占有率--cpu占用太高怎么办

Atitit. 最佳实践 QA----减少cpu占有率--cpu占用太高怎么办跟个磁盘队列长度雅十,一到李80%走不行兰.... 1. 寻找线程too 多的.关闭... Taskman>>>show colomn thread 资源管理器>>>cpu>>>看线程数.. 作者::老哇的爪子Attilax艾龙,EMAIL:1466519819@qq.com 转载请注明来源: http://blog.csdn.net/attilax 2. 关闭Flash

第4天：JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS入门_设置div宽.高.背景色</title> <style> *{ margin:0; padding:0; } h2{ float: l

[iOS]图片高清度太高, 导致内存过大Crash

先说一下状况, 后台提供的图片太高清了, 每个图片都在2-4MB, iOS上每个页面需要同时下载并展示10-15张. 这个时候, 如果我多滑动collectionView几次, 直接App就崩溃了(reason: 是内存警告, 超出每个App可用的最大内存限制) 解决方法: 经过各种百度, Google以后. 我是这样解决的. 缩小图片的高清度. // 开辟一条子线程dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_

div层级太高,事件穿透

热门专题