使用 JavaScript 和 css 拖动时如何隐藏光标

Question

我需要在网络浏览器上拖动时隐藏光标。它不一定是 HTML 元素。如果我单击页面上的任意位置并单击并拖动，光标应该被隐藏。拖动完成时，应再次显示光标。当我点击页面上的其他按钮时，光标无法隐藏。它应该只在单击和拖动时隐藏，而不是在单击时隐藏。有什么方法可以使用 CSS 和 JavaScript 来实现吗？感谢您的帮助。

Answer 1

最简单的解决方案就是使用 mousemove 事件

var dragElement = null;
document.addEventListener("mousemove", e =>
{
  const isDragging = e.buttons == 1 && (e.movementX || e.movementY);
  document.body.classList.toggle("drag", isDragging);
  if (isDragging)
  {
    if (!dragElement)
      dragElement = e.target;

    console.log("dragging", dragElement);
  }
  else
  {
    dragElement = null;
  }
});

html, body
{
  height: 100%;
  width: 100%;
}
body.drag
{
  cursor: none;
  user-select: none;
}

#test
{
  width: 10em;
  height: 10em;
  background-color: pink;
}

<div id="test">test</div>

但是，即使用户在页面外单击，此方法也会触发“拖动”。为了解决这个问题，我们可以跟踪 mousedown 和 mouseup 事件：

var dragElement = null;
document.addEventListener("mousedown", e =>
{
  dragElement = e.target;
});

document.addEventListener("mouseup", e =>
{
  dragElement = null;
});

document.addEventListener("mousemove", e =>
{
  const isDragging = dragElement && (e.movementX || e.movementY);
  document.body.classList.toggle("drag", isDragging);
  if (isDragging)
  {
    console.log("dragging", dragElement);
  }
});

document.body.appendChild(document.createElement("canvas"));

html, body
{
  height: 100%;
  width: 100%;
}
body.drag
{
  cursor: none;
  user-select: none;
}

#test
{
  width: 30vw;
  height: 30vh;
  background-color: pink;
}

canvas
{
  width: 30vw;
  height: 30vh;
  background-color: lightgreen;
}

<div id="test">test</div>

使用 JavaScript 和 css 拖动时如何隐藏光标

How To hide cursor when dragging using JavaScript and css

html

javascript

css

cursor

hide