pointer-events用法

用c3做动效的时候遇到层级问题很不好处理，导致前面的元素影响后面元素的鼠标事件。被这个问题困扰好久突然想到有没有什么属性能让元素被虚化，点击事件可以渗透。发现了这个神奇的用法。
svg之外的元素支持两个值：none和auto.
auto是默认值就不解释了。
none:MDN上的解释是这样的，元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
也就是说添加了pointer-events：none的元素，其子元素依然可以通过添加pointer-events：auto恢复鼠标事件。如果想让父元素虚化，又想让其子元素存在鼠标事件，简直太好用了
不过该属性的兼容性不太好，使用的时候要考虑下。

这是要实现的效果，虚线的大圆圈是可以旋转的，实际上是一个很大的定位元素旋转了角度，它和地图都是定位元素，但由于旋转了角度，红线下面的部分都是大圆圈的地盘，我的地图南部地区点不到了，很头疼！！！
给大圆圈加上pointer-events：none;就可以点到地图的任何地方。
但是问题又来了，旅游，交通，台风这些按钮的点击事件也没了，给这些按钮加上pointer-events：auto;
bug都没了，完美。

pointer-events用法相关推荐

把鼠标、触摸屏、触控笔统一起来，Pointer Events介绍
跨设备的问题平时我们在电脑上访问的网页,大部分情况下是用鼠标来控制的.比如说链接跳转,就是鼠标指针移动到链接文字或图片的位置,然后点击一下.又比如说滚动屏幕,滑动一下鼠标滚轮就可以. 如果是供手机访 ...
《Essential C++》笔记之传指针(pass by pointer)分析
举例分析:把指针作为函数参数传递 void fun(vector<int>*); 函数声明中把指针vector<int>*作为函数参数传递 //小问学编程 #include & ...
plc的指针和c语言指针,关于STEP7 Pointer指针的问题
buffer声明为pointer输入变量,DB_ID声明为word临时变量 L 最佳答案 1:首先需要了解 POINTER 的结构 POINTER是一个类似于C语言中指向指针的指针见图1 POINT ...
简介 Tagged Pointer (标记指针)
在计算机科学中,Tagged Pointer 是一个指针(内存地址),它具有与其关联的附加数据,例如,indirection bit 或引用计数. 这些附加数据通常是"折叠"在指 ...
TouchScript中文---Pointer Input
本博主要是看到github上有TouchScript的基本的文档,想要翻译成中文,加深一下理解,同时写一下自己的想法. 原文博客:https://github.com/TouchScript/Touc ...
禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效
这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效.该菜单按钮特效在用户点击汉堡包按钮时,按钮会分割为多段,并旋转变形为关闭按钮的状态.当再次点击该按钮时,它会逆向变形为汉堡包图标. ...
把这304道React的面试题刷完，前端面试没有在怕的！
Core React 什么是 React? React 是一个开源前端 JavaScript 库,用于构建用户界面,尤其是单页应用程序.它用于处理网页和移动应用程序的视图层.React 是由 Face ...
React 面试题回答
原文https://github.com/semlinker/reactjs-interview-questions 本项目的面试题来源于 sudheerj/reactjs-interview-que ...
生成html水印,兼容ie8,ie兼容性问题与解决办法,移动端水印给出的建议
首先放上两段代码 watermark.js 与其兼容方式扩展 pointer_events_polyfill.js watermark.js ↓↓ // 水印 (function(waterma ...

pointer-events用法

pointer-events用法相关推荐

最新文章

热门文章