使用触控笔点击拖动时鼠标光标消失，如何通过代码阻止？

核心原因 #

部分浏览器或系统在处理触控笔拖动操作时，会默认隐藏光标以模拟手指触控的交互逻辑——即便你预先设置了cursor: crosshair，在触发touchmove并阻止默认行为后，系统仍可能覆盖光标样式导致其消失。

解决方案 #

1. 通过CSS锁定基础光标样式 #

给绘图区域的div添加强制定义的光标样式，避免系统默认样式干扰：

.your-drawing-container {
  cursor: crosshair;
  /* 强制提升优先级，防止其他样式覆盖 */
  cursor: crosshair !important;
}

2. 在触控事件中主动重置光标样式 #

在touchstart和touchmove回调中强制设置光标样式，确保交互全程光标保持可见：

// 初始化光标样式
div.style.cursor = 'crosshair';

// 监听touchstart，确保触控笔点击时光标不消失
div.addEventListener('touchstart', function(e) {
  e.preventDefault();
  div.style.cursor = 'crosshair';
  // 此处可添加绘图初始化逻辑
}, { passive: false });

// 修改touchmove事件处理，强制维持光标状态
div.addEventListener('touchmove', function(e) {
  e.preventDefault();
  // 每次拖动时主动设置光标
  div.style.cursor = 'crosshair';
  // 你的绘图逻辑（如更新十字准星位置、绘制路径等）
}, { passive: false });

补充说明 #

• passive: false必须保留，因为需要调用e.preventDefault()阻止默认触控滚动行为，这是保证绘图交互正常的前提。
• 若你的十字准星是自定义DOM元素（而非原生cursor），需在touchmove时同步更新该元素位置，同时确保其display属性始终为可见状态（如block），避免被系统隐藏。

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