鼠标按下和拖动时光标不会改变（IE11）答案

【问题标题】：Cursor does not change on mousedown and drag (IE11)鼠标按下和拖动时光标不会改变（IE11）
【发布时间】：2016-09-24 17:18:33
【问题描述】：

我正在尝试实现“伪拖动”：您拖动元素，但元素本身没有被拖动，它会更改所需区域中的光标。但不好的是，当鼠标在需要的区域时，光标不会改变。只有当您在该区域释放鼠标时，它才会更改。如果您观察 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）到所需区域时改变光标？

【问题讨论】：

标签： javascript html css internet-explorer cursor

【解决方案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>

【讨论】：