我正在尝试实现“伪拖动”:您拖动元素，但元素本身并未被拖动，它会在所需区域更改光标。但不好的是，当鼠标在需要的区域时，光标不会改变。只有当您在该区域释放鼠标时它才会改变。如果您观察 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)到所需区域时使光标发生变化？
最佳答案
有点奇怪，但这应该适用于 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>关于javascript - 光标在鼠标按下和拖动时不会改变 (IE11)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39674031/