前端鼠标微交互中，我们经常会处理鼠标事件，常见的应用场景就是tips跟随鼠标移动。css中 pointer-events属性就是一个和鼠标事件相关的属性，它能带给我们哪些精湛的表现呢，下面就是情景之一
背景
最近在做前端页面交互的时候，需要做一个移动tips，tips的位置会随着鼠标的移动而发生位置变化，写完代码以后，发现交互总是不流畅，容易出现卡顿和失效的问题。
解决
然后我就非常仔细地寻找蛛丝马迹，找到可能出现问题的原因。由于我的tips是在鼠标的右下角做展示，当鼠标往右下角较快移动的时候，就出现了这个问题。
我猜测可能是鼠标事件冒泡导致的，常规解决办法就是用js去阻止事件冒泡，这个时候我又想起了之前一次和好基友商量处理前端微交互的的现场，然后我觉得之前的解决办法也能搞定这次的问题。
然后直接给tips的样式直接设置了一个pointer-events:none，不出所料果然解决问题，开心啊。
基于jquery我做一了一个demo，复现了案发现场，Demo。
深入研究
案发现场
上面是案犯现场大致的情况，tips是在鼠标的右下角做展示，当鼠标往右下角较快移动的时候，鼠标会不小心移动到tips上，然后触发了tips的鼠标事件，随后又冒泡到父辈DOM元素上，而我们在父辈元素上进行了鼠标事件处理操作，然后就出现问题，tips的移动会出现卡顿，当鼠标已经离开父辈元素的区域，而tips因为坐标的问题已经显示在父辈元素之外了，但是依旧能触发父辈元素的鼠标事件。
pointer-events
它有两个值，auto和none。所有的dom元素，它的pointer-events的属性都是默认值为auto。都能触发鼠标事件，但我们将其设置为none的时候，该DOM元素就不能触发鼠标事件了。也就是常见的hover、click、mousemove等事件。当我们鼠标在该DOM元素上的时候，就会发现鼠标穿透了，该元素就像被鼠标忽略了。关于这个属性的更多信息我们我可以参照旭哥的文章pointer-events应用举例及扩展。
总结
- css里面有很多黑魔法，还是很值得深入研究的
- 前端微交互，涉及到鼠标事件的时候，我们就应该想起这个css属性，它可能拥有黑魔法
