非要有用的pointer-events
2021-08-27 本文已影响0人
may505
简介
属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
用法
- 穿透当前层
在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖
住下面的地图层,以至于地图层无法操作。。。
然后正好在Google map见到了类似的问题,拿来当例子来说:
imageGoogle map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。
但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。
貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。