如何在 Javascript 中不移动鼠标就强制更改鼠标光标？答案

【问题标题】：How do I force the mouse cursor to change without a mouse movement in Javascript?如何在 Javascript 中不移动鼠标就强制更改鼠标光标？
【发布时间】：2012-01-03 23:22:09
【问题描述】：

在我的网页中，在 Chrome 上进行测试，我有一个按钮 div。该按钮的样式使其具有不同颜色的悬停状态和手形鼠标指针。这一切都很好。

当按钮被按下时，它会触发一个动画，并且我不想让用户再次按下按钮直到它完成，所以我在顶部放置了一个半透明的 div 来阻止按钮。

当动画完成并移除 div 时，问题就出现了。鼠标指针悬停在按钮上，但直到用户实际移动鼠标后，悬停状态才处于活动状态，然后鼠标指针发生变化，一切正常。

请注意，点击仍然有效 - 这纯粹是一种装饰性（但令人讨厌）的异常。

我可以强制浏览器重新计算光标下的点吗？

【问题讨论】：

好问题。只是出于好奇，覆盖按钮的 div 是否会阻止键盘访问它？
pseudocode- button onclick = ((){ button.disabled = "disabled"; startAnimation(); button.removeAttribute(disabled); })() - 其中 button 是来自 getElementById 的 html 元素或getElementsByTagName().

标签： javascript html google-chrome

【解决方案1】：

阻止输入按钮的正确方法是禁用它。您可以使用 CSS cursor 属性切换光标样式。

Javascript：

var theButton = document.getElementById('theButton');
    theButton.disabled = true;
    theButton.setAttribute('style','cursor:default;');

// animation is complete

theButton.disabled = false;
theButton.removeAttribute('style');

jQuery：

var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');

// animation is complete

$theButton.prop('disabled',false).css('cursor','pointer');

【讨论】：

啊..也许问题是我没有使用按钮，我使用的是悬停状态的 div。我可能应该考虑使用按钮...
哦，对不起，我误读了您问题的那一部分。是的，我建议使用按钮。 <input type="button"' can be styled just as flexibly as a
`，它在语义上更正确、优雅地降级，并且更适合可访问性（屏幕阅读器、移动设备等）
我遇到了这个问题，但这并没有在 Chrome 中解决：\

【解决方案2】：

在动画结束并删除 div 时检查鼠标的位置，或者只是始终存储它们并在结束时检查该值以查看光标是否仍在您的按钮上。你可以用event.clientX, event.clientY or event.pageX, event.pageY 来做到这一点，类似于那些（不完全确定只是做了一些快速研究，但那些似乎在 chrome、IE 和 firefox 中工作）。然后，如果鼠标仍在按钮上，再次触发按钮元素的 on.hover。

【讨论】：

【解决方案3】：

尝试在jquery中使用*通配符设置所有元素的光标。看看这是否会更新光标。

【讨论】：

【解决方案4】：

您的问题的根源似乎是如何防止双重动画。无需在其上放置 <div>，您只需使用 JavaScript 即可。

启动动画时，将名为 isAnimating 的全局变量设置为 true。在您的点击处理程序顶部添加这一行 if (isAnimating) return false; 显然，您需要在动画完成后立即将 isAnimating 设置为 false，无论是通过计时器还是在某种回调函数中。

这将防止双重动画，而不会对 DOM 做任何会影响悬停状态的傻事，或者我希望如此！

如果这不是你的意思，请告诉我，我会再看一遍！

【讨论】：

他不仅想知道按钮何时没有动画，还想知道光标是否停留在按钮上。如果它移动了，那么他没有问题。他只有在鼠标没有移动时才会出现问题，因此没有任何东西激活悬停。因此，即使鼠标不再位于按钮上，您的回答也会使悬停激活，这当然会很糟糕。