光标在鼠标按下和拖动时不会改变 (IE11)

Question

我正在尝试实现 "pseudo-drag"：您拖动元素，但元素本身并未被拖动，它会在所需区域更改光标。但不好的是，当鼠标在需要的区域时，光标不会改变。只有当您在该区域释放鼠标时它才会改变。如果您观看 DOM 检查器，代码中的 更改会在需要时发生，但 在屏幕上 它只会在您释放鼠标按钮。我做了一个简短的问题示例：

<!DOCTYPE html>
<html>
<head>
 <title>Test drag</title>
 <script>
  document.addEventListener('DOMContentLoaded', function (event) {
   var btn = document.querySelector('#btn');
   var to = document.querySelector('#to');
   btn.addEventListener('mousedown', function (event) {
    to.style.cursor='wait';
   });
  });
 </script>
</head>
<body>
 <div id="from">
  <button id='btn'>DRAG ME!</button>
 </div>
 <div id="to" style="height: 150px;background-color: aqua;"></div>
</body>
</html>

此问题已在 IE11 上报告。

那么问题来了：有没有什么办法可以在拖动光标（按下LMB）到想要的区域时改变光标？

Answer 1

有点奇怪，但这应该适用于 IE11 和 Chrome。

var btn = document.getElementById('btn');
var to = document.getElementById('to');

document.addEventListener('mousedown', function (event) {
  if(event.target.id === 'btn') {
    
    // for Chrome
    to.style.cursor='wait';
    
    // for IE11
    to.classList.add('wait');
    to.focus();
  }
});

document.addEventListener('mouseup', function (event) {
  
  // for Chrome
  to.style.cursor='default';
  
  // for IE11
  to.blur();
  to.classList.remove('wait');
})

.wait:hover {
  cursor: wait;
}

<div id="from">
  <button id='btn'>DRAG ME!</button>
</div>
<div id="to" style="height: 150px;background-color: aqua;"></div>

光标在鼠标按下和拖动时不会改变 (IE11)

Cursor does not change on mousedown and drag (IE11)

html

javascript

css

internet-explorer

cursor