CSS 再谈 pointer-event

之前在 JavaScript 优化拖移效果 中,我曾经简单讲过:

之后,如果需要在移动时取消所有鼠标的响应时间,可以通过调整 pointer-events 样式来修改,在变更拖动状态时修改 body 的 style 即可。

但没有进行过详细的介绍,这次正好结合了其他点仔细讲讲。

pointer-event 其实也有许多值,可以在 MDN 中 pointer-events 详细的描述了这些值,当然,大部分都是 SVG only,我们今天考虑的自然不是 SVG Only 的属性,而是通用的属性。

说白了也就两个:autononeauto 自不必说,其实和 initial 差不多一个意思。而 none 不仅可以实现事件禁用,还可以实现点击穿透。

点击穿透

正式介绍一下,什么叫点击穿透?

15225845381133.jpg

假设你想实现这样一个效果,其中图片是一层(绘制在 canvas 上),拖拽和控制点的矩形框是另一层,那么「矩形框层」必须在 Canvas 层的上方,但是在图片层自带了拖动事件,只要矩形框跟着动就行了,怎么办——所以就需要用到穿透了——pointer-event: none。搞定。

也就是说,使用了点击穿透这个效果,可以把原来覆盖的图层无视,直接把鼠标事件作用于被覆盖的图层。

当然,大家一定要说,那为什么不直接让图片层跟着矩形框动呢——你说的很有道理,但为了面子我必须说:我们这是特定的某个应用场景。

事件禁用

如果你的事件禁用还在强行写一长串 JS,那你就大错特错了。pointer-event: none 可以用一句 CSS 做到这个效果,何乐而不为呢。

当然,对于事件禁用,让人注意的其实是一个题外话,试试下面的 demo(两个矩形框里也隐藏了按钮):

我们会发现,只有 opacity: 0 才有效,也就是说,被我们一直忽略的 visibility 也有这种效果,所以我们可以放心大胆的直接用 visibility 来隐藏一些元素,不用特地写上 pointer-event: none 了。

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, 语法

仅有一条评论

  1. 周中石

    不管是 CSS 还是 JS,总感觉是同一个东西。就是一个属性。然后会影响一些行为或者渲染结果。但是却有两种表达方式…导致人一会要在 CSS 里解决问题,一会要在 JS 里解决问题…很心累

添加新评论