如何在Safari中正确隐藏光标？Chrome正常但拖拽时光标复现

你碰到的是Safari的一个特有行为——哪怕给元素设置了cursor:none和-webkit-user-select:none，当你在元素上按住鼠标拖拽时，浏览器还是会强制恢复光标显示。这是因为Safari处理拖拽操作时，会忽略部分CSS光标规则，和文本选择限制是独立的两个逻辑。

下面给你两个可行的解决思路：

方案1：添加-webkit-app-region: no-drag CSS属性 #

这是最简洁的办法，给目标div加上这个属性，告诉Safari不要把该元素识别为可拖拽区域，就能阻止拖拽时的光标重置：

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  -webkit-user-select: none;
  cursor: none;
  -webkit-app-region: no-drag; /* 关键修复属性 */
}

方案2：用JavaScript监听拖拽事件强制控光标 #

如果你的场景需要保留元素的拖拽功能（比如自定义拖拽交互），-webkit-app-region: no-drag会禁用原生拖拽，这时候可以用JS监听拖拽全流程，强制保持光标隐藏：

<div id="cursorHideArea"></div>
<span>Test</span>

<script>
const targetArea = document.getElementById('cursorHideArea');
let isDragging = false;

// 按下鼠标时标记拖拽状态并锁定光标
targetArea.addEventListener('mousedown', () => {
  isDragging = true;
  targetArea.style.cursor = 'none';
});

// 鼠标移动时，若处于拖拽状态且光标在目标区域，强制隐藏
document.addEventListener('mousemove', (e) => {
  if (isDragging && targetArea.contains(e.target)) {
    targetArea.style.cursor = 'none';
  }
});

// 松开鼠标时结束拖拽状态
document.addEventListener('mouseup', () => {
  isDragging = false;
});
</script>

<style>
div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  -webkit-user-select: none;
  cursor: none;
}
</style>

这个方法通过主动监听拖拽的开始、进行、结束三个阶段，确保在拖拽过程中光标始终保持隐藏，覆盖Safari的默认行为。

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