Safari中Pointer Events拖拽时pressure为0的问题及检测方法

问题原因 #

Safari对Pointer Events的pressure属性实现存在局限性：

• 针对鼠标输入（比如拖拽操作），Safari在pointermove事件里返回的pressure值始终为0，而Chrome、Firefox等浏览器会在鼠标按钮按压时返回大于0的数值。
• pressure属性原本是为触控笔、压力感应屏幕这类设备设计的，Safari对鼠标输入的压力值处理未遵循其他浏览器的实现逻辑，导致无法通过它判断鼠标按压状态。

解决方案 #

推荐两种兼容性更好的方式来检测按压状态：

方法1：通过pointerdown/pointerup维护按压状态 #

通过监听pointerdown和pointerup事件标记按压状态，在pointermove中判断该状态：

let element = document.querySelector("#some_id");
let isPressed = false;

// 标记按压开始
element.onpointerdown = () => {
  isPressed = true;
};

// 标记按压结束
element.onpointerup = () => {
  isPressed = false;
};

// 拖拽时检查状态
element.onpointermove = (e) => {
  if (isPressed) {
    console.log("ok");
  }
};

方法2：直接检查buttons属性 #

Pointer Events标准中的buttons属性会返回当前按下的鼠标按钮掩码，鼠标左键按下时值为1，右键为2，任意按钮按下时值大于0。直接在pointermove中判断该属性：

let element = document.querySelector("#some_id");
const pointer = function(e) {
  // 检测是否有任意鼠标按钮处于按下状态
  if (e.buttons > 0) console.log("ok");
};
element.onpointermove = pointer;

这两种方法在所有主流浏览器（包括Safari）中都能稳定工作，无需依赖pressure属性的非标准实现。

内容的提问来源于stack exchange，提问作者Amadeus