在触控设备上使用js移除自定义光标

Question

我在我的网站上有一个自定义光标，我想在触摸设备(移动设备/平板电脑)上隐藏它。我已经成功地做到了这一点，但在你访问网站的瞬间，光标出现在左上角，然后隐藏起来。有没有办法完全停止它的显示？

这是我用来删除触摸设备上光标ID的代码。

jQuery(document).ready(function($) {
{
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
}
});

​

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});
});

* {
  cursor: none;
}

#custom-cursor {
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}
#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="custom-cursor"></div>

​

Answer 1

如果没有看到更多的代码，就不可能绝对确定，但从问题中的信息看，似乎整个页面都是在光标移除之前加载的。

您可以通过多种方式来解决这个问题，例如，在初始HTML中没有cursor元素，但如果需要，可以在加载时添加它。

或者，您可以保持初始HTML不变，但将光标设置为在CSS中显示:无。然后，如果光标不被移除，JS会将style.display设置为block。

更新:现在已经看到了更多的代码，下面是一个代码片段，展示了第二个方法(在页面加载之前使用display: none的光标)是如何实现的：

​

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}

document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});
});

* {
  cursor: none;
}

#custom-cursor {
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
    display: none;
}
#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="custom-cursor"></div>

​