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都没了，完美。