如何在触控设备中用JS完全隐藏自定义光标 避免加载时闪现问题

问题原因 #

你当前的自定义光标闪现，是因为移除逻辑绑定了jQuery(document).ready事件，该事件需要等待DOM树完全解析完成后才会执行，此时#custom-cursor元素已经被浏览器渲染到页面上，所以会出现短暂的左上角闪现后才被移除的情况。

解决方案 #

方法1：提前执行设备检测（优先推荐） #

不要等待DOM加载完成再做判断，直接把检测逻辑放在自定义光标元素之前内联执行，用CSS类控制显隐，从根源上避免触控设备渲染光标元素：

1. 在你的HTML中，把检测代码放在#custom-cursor的前面：

<script>
// 页面解析到此处立即执行，不需要依赖jQuery或DOM加载完成
// 优先使用指针能力检测，比UA检测适配性更强
const isTouchDevice = !window.matchMedia('(pointer: fine)').matches || /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent);
if (isTouchDevice) {
  document.documentElement.classList.add('is-touch');
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

2. 补充对应CSS规则：

/* 触控设备直接隐藏自定义光标，恢复默认光标 */
.is-touch * {
  cursor: auto !important;
}
.is-touch #custom-cursor {
  display: none !important;
}

3. 删除你原来写在jQuery(document).ready里的UA检测+移除光标的代码，不需要再执行。

方法2：默认隐藏光标，确认是键鼠设备后再显示 #

如果还担心有漏判的情况，可以给自定义光标加默认隐藏的规则，只有检测到非触控设备时才渲染：

#custom-cursor {
  /* 原有样式不变，新增默认隐藏规则 */
  display: none;
}
/* 非触控设备才显示自定义光标 */
html:not(.is-touch) #custom-cursor {
  display: block;
}

这个方案可以100%避免触控设备出现光标闪现的问题。

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