如何在Javascript中强制更改鼠标指针而无需移动鼠标？

Question

在我的网页上，在Chrome浏览器上，我有一个按钮div。这个按钮被设计成在鼠标悬停时显示不同颜色的状态，并且有一个手形鼠标指针。这一切都很好。

当按下按钮时，它会触发动画效果，我不想让用户在完成之前再次按下按钮，因此我在顶部放了一个半透明的div来阻止按钮。

问题出现在动画完成并移除div时。鼠标指针位于按钮上方，但悬停状态未激活，直到用户实际移动鼠标，然后鼠标指针改变，一切都恢复正常。

请注意，点击仍然有效 - 这是一个纯粹的视觉（但令人烦恼的）异常。

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

- izb

---

好问题。只是出于好奇，覆盖按钮的 div 是否会阻止键盘访问它？ - nnnnnn

伪代码- button onclick = ((){ button.disabled = "disabled"; startAnimation(); button.removeAttribute(disabled); })() - 其中button是来自getElementById或getElementsByTagName()的HTML元素。 - Acn

Answer 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');

- Ansel Santosa

---

啊..也许问题在于我没有使用按钮，而是使用了带有悬停状态的div。我应该考虑使用按钮... - izb

哦，抱歉，我误读了你问题的那部分。是的，我建议使用按钮。<input type="button> 可以像 <div> 一样灵活地进行样式设计，它更符合语义化，能够优雅地降级，并且对于无障碍性（屏幕阅读器，移动设备等）更好。 - Ansel Santosa

我遇到了这个问题，在Chrome中也没有解决它：\ - addMitt

Answer 2

在动画结束并移除div时，检查鼠标的位置，或者始终存储它们并在结束时检查该值，以查看光标是否仍停留在按钮上。您可以使用event.clientX、event.clientY或event.pageX、event.pageY之类的内容（不完全确定，只是进行了一些快速研究，但这些似乎在Chrome、IE和Firefox中都有效）。然后，如果鼠标仍停留在按钮上，请再次触发按钮元素的on.hover。

- Ryan

Answer 3

尝试使用jQuery中的*通配符来设置所有元素的光标，并查看是否会更新光标。

- nickw444

Answer 4

看起来你的问题根源在于如何防止双重动画。你可以使用JavaScript来完成，而不是覆盖一个<div>。

当你开始动画时，设置一个名为isAnimating的全局变量为true。在单击处理程序的顶部添加此行：if (isAnimating) return false; 显然，一旦动画完成（通过计时器或某种回调函数），你需要尽快将isAnimating设置为false。

这将防止双重动画，而不会通过对DOM进行任何愚蠢的操作来影响悬停状态，希望如此！

如果我理解错了，请让我知道，我会再次查看它！

- Jamund Ferguson

---

他不仅想知道按钮何时未被动画，还想知道光标是否停留在按钮上。如果移动了光标，那么他就没有问题。只有当鼠标未移动时，即没有激活悬停状态时，他才会遇到问题。因此，您的答案将使悬停状态即使鼠标已不再位于按钮上也会被激活，这当然是不好的。 - Ryan