了解pointer-events以及巧用pointer-events

了解pointer-events

当在HTML元素上使用pointer-events属性时,它可以指定元素是否能响应鼠标(或触摸)事件。你可以让元素响应指针事件(auto),或者阻止它执行此操作(none)。如果阻止它响应指针事件,则其下面的元素将成为这些事件的目标。如果单击该元素,则其下方的元素将接收该单击(click)事件。同样也适用于悬停和其他光标操作。

它有这些属性:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events实际使用

1、操作按钮禁用以及禁用表单

当表单编辑与详情共用一个页面的时候,通过给详情页面form表单加上pointer-events:none,则简单快速实现了表单的操作

2、解决层级事件。给层级高的元素加上pointer-events:none,禁用事件,保证层级低的元素正常可点击。如水印,游戏悬浮物,长文本阴影效果

水印是在内容上面的,为了不影响页面操作,给水印加上pointer-events:none

3、禁用微信图片保存、收藏,转发、分享操作

当长按图片的时候,会出现系统菜单:保存、收藏,转发、分享。给图片加上pointer-events:none则可禁用系统菜单弹出。这在长按拖动的时候同时也是提升了操作体验。

4、提升页面滚动性能

当滚动时,鼠标悬停在某些元素上,则触发其上的 hover 效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。对body元素应用pointer-events:none,禁用了包括hover在内的鼠标事件,从而提高滚动性能。

let timer = nullwindow.addEventListener("scroll", function () { document.body.style.pointerEvents = 'none'; // 滚动时禁用鼠标事件if (timer) { clearTimeout(timer) } timer = setTimeout(() => { document.body.style.pointerEvents = 'auto'; // 释放 }, 100); })

如果移动端有自定义拖动的需求,也可以用这个 CSS 来优化性能,当我们需要完全阻止原生touch事件时JS设置 touch-action 为 none,不需要再还原即可

// 在需要时主动触发对全局的手势禁用
document.documentElement.style.touchAction = 'none'
// 或者独立禁用某一片区域的手势操作
document.getElementById('xxx').style.touchAction = 'none'
// 不需要时还原,例如在抬手事件中处理
document.addEventListener('touchend', function (event) {
    document.documentElement.style.touchAction = 'manipulation' // 或 auto
});

提示

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然,位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(鼠标活动将会穿过父元素而指向位于其下面的元素)。

button按钮可以通过tab切换聚焦回车而触发事件。因此使用pointer-events:none禁用按钮事件并不可靠。


参考:

学会一行CSS即可提升页面滚动性能

MDN pointer-events

发表回复

您的电子邮箱地址不会被公开。