Question

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

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

当动画完成并删除div时，问题就出现了。鼠标指针位于按钮上方，但悬停状态在用户实际移动鼠标之前不会处于活动状态，然后鼠标指针会发生变化，一切都很好。

请注意，点击仍然有效 - 这是一种纯粹的美化（但令人讨厌）的失常。

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

Answer 1

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

<强>使用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');

Answer 2

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

Answer 3

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

Answer 4

似乎问题的根源在于如何防止双重动画。您可以使用JavaScript进行操作，而不是在其上放置<div>。

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

这样可以防止双重动画，不会对可能影响悬停状态的DOM做任何愚蠢的事情，或者我希望如此！

如果这不是您的意思，请告诉我，我会再看看它！

在Javascript中如何在没有鼠标移动的情况下强制鼠标光标进行更改？

4 个答案: