在触摸设备上禁用 javascript（自定义光标）

Question

是否可以只在 mobile/tablet 台设备上使用一块 javascript？我想做一些比 display: none 更好的事情，如果不需要，从运行停止脚本是有意义的？

基本上我有一个自定义光标效果，只有当它在桌面上跟随光标时才需要 mouse/trackpad。

这是我的脚本：

var cursor = document.querySelector('.cursor-outer');
var cursorinner = document.querySelector('.cursor');
var a = document.querySelectorAll('a');
 
var moveCursor = true;
var radiusOfCursor = parseInt(getComputedStyle(cursor).getPropertyValue('width')) / 2; // radiusOfCursor = (width_of_cursor / 2).
     
document.addEventListener('mousemove', function (e) {
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
  
  if (!moveCursor) return;
  
  cursor.style.marginLeft = `calc(${e.clientX}px - ${radiusOfCursor}px)`;
  cursor.style.marginTop = `calc(${e.clientY}px - ${radiusOfCursor}px)`; 
  
  moveCursor = false;
  
  setTimeout(() => {
    moveCursor = true;
  }, 32) // The wait time. I chose 95 because it seems to work just fine for me.
});
 
 /* Centre pointer after stopping */
 
function mouseMoveEnd() {
  cursor.style.marginLeft = `calc(${cursorinner.style.left} - ${radiusOfCursor}px)`;
  cursor.style.marginTop = `calc(${cursorinner.style.top} - ${radiusOfCursor}px)`;
}
 
var x;
document.addEventListener('mousemove', function() { 
  if (x) clearTimeout(x); 
  x = setTimeout(mouseMoveEnd, 10); 
}, false);
 
 /* End */
 
document.addEventListener('mousedown', function() {
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover');
});
 
 document.addEventListener('mouseup', function() {
  cursor.classList.remove('click');
  cursorinner.classList.remove('cursorinnerhover');
 });
 
a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });
});
 
a.forEach((item) => {
  const interaction = item.dataset.interaction;
  
  item.addEventListener("mouseover", () => {
    cursorinner.classList.add(interaction);
  });
  item.addEventListener("mouseleave", () => {
    cursorinner.classList.remove(interaction);
  });
});

* {
  cursor: none;
}

.cursor-outer {
    border: 2px solid black;
    border-radius: 100%;
    box-sizing: border-box;
    height: 32px;
    pointer-events: none;
    position: fixed;
        top: 16px;
        left: 16px;
      transform: translate(-50%, -50%);
        transition: height .12s ease-out, margin .12s ease-out, opacity .12s ease-out, width .12s ease-out;
    width: 32px;
    z-index: 100;
}

.cursor {
    background-color: black;
    border-radius: 100%;
    height: 4px;
    opacity: 1;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: height .12s, opacity .12s, width .12s;
    width: 4px;
    z-index: 100;
}

<div class="cursor-outer"></div>
<div class="cursor"></div>

提前致谢！

Answer 1

选项#1

您可以使用与此类似的方法来确定设备是否 touch-enabled:

isTouchDevice = () => {
  return ( 'ontouchstart' in window ) ||
    ( navigator.maxTouchPoints > 0 ) ||
    ( navigator.msMaxTouchPoints > 0 );
};

本文改编自 Patrick H. Lauke 在 Mozilla 上的 Detecting touch 文章。

然后就是：if (isTouchDevice()) { /* Do touch screen stuff */}

选项#2

但也许纯粹的 CSS 方法更适合您的情况，例如：

@media (hover: none) {
 .cursor {
    pointer-events: none;
  }
}

选项#3

如果您不介意使用 third-party 库，那么 Modernizr 非常适合在用户环境中检测此类情况。具体来说，Modernizr.pointerevents 将确认是否正在使用触摸屏。

在触摸设备上禁用 javascript（自定义光标）

Disable javascript (custom cursor) on touch devices

javascript

html

css

touch

选项#1

选项#2

选项#3