Safari中:active伪类下grabbing光标移动时失效问题及解决方法咨询

这个Safari的光标bug我踩过好几次了！确实头疼——按住元素触发:active后，grabbing光标刚显示就被文本光标给顶掉了，而且只在Safari里出现。下面给你几个亲测有效的解决办法：

方案1：禁用文本选择（优先推荐） #

问题的根源其实是Safari在按住元素时会自动触发文本选择行为，而文本光标的优先级比:active设置的光标更高。给拖拽元素加上user-select: none就能阻止文本选择，让grabbing光标保持显示：

.drag{
  padding: 40px;
  background: #000;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  /* 新增这两行，Safari需要前缀兼容 */
  user-select: none;
  -webkit-user-select: none;
}
.drag:active{
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

如果你的拖拽元素内部有需要用户选中的文本，可以单独给文本元素设置user-select: text，这样既不影响拖拽光标，也能保留文本选择功能。

方案2：用JavaScript手动切换类名 #

如果user-select: none会和你的其他功能冲突（比如元素内需要复制文本），可以用JS监听鼠标事件来手动控制光标类，绕开:active的优先级问题：

首先调整CSS，把:active改成自定义类名：

.drag{
  padding: 40px;
  background: #000;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
/* 用.grabbing类代替:active伪类 */
.drag.grabbing{
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

然后添加JS事件监听：

// 获取所有拖拽元素（如果多个的话）
const dragElements = document.querySelectorAll('.drag');

dragElements.forEach(el => {
  el.addEventListener('mousedown', () => {
    el.classList.add('grabbing');
  });
});

// 监听全局mouseup，防止鼠标移出元素后没触发移除
document.addEventListener('mouseup', () => {
  dragElements.forEach(el => {
    el.classList.remove('grabbing');
  });
});

这个方案的灵活性更高，适合复杂交互场景。

方案3：临时调整pointer-events（慎用） #

如果前面两个方案都不适用，可以试试在:active状态下临时设置pointer-events: none，但这个要谨慎使用，因为会让元素在鼠标按下时暂时不响应其他事件：

.drag:active{
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  pointer-events: none;
}

这个只适合单纯的拖拽场景，不推荐在有点击、hover等其他交互的元素上使用。

亲测前两个方案在Safari 15及以上版本都能稳定工作，优先推荐方案1，最简单高效。

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