Как заставить курсор мыши измениться без движения мыши в Javascript?

Question

На моей веб-странице, тестирующей Chrome, у меня есть кнопка div.Кнопка стилизована таким образом, что она имеет состояние наведения другого цвета и указатель мыши в форме руки.Все это хорошо.

Когда кнопка нажата, она запускает анимацию, и я не хочу, чтобы пользователь нажимал кнопку еще раз, пока она не закончила, поэтому я помещаю полупрозрачный div надtop, чтобы заблокировать кнопку.

Проблема возникает, когда анимация завершается и 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 для элемента button.

Answer 3

Кажется, корень вашего вопроса был в том, как предотвратить двойную анимацию. Вместо того, чтобы помещать <div> поверх него, вы можете просто сделать это с помощью JavaScript.

Установите глобальную переменную с именем isAnimating в true при запуске анимации. В верхней части вашего обработчика кликов добавьте эту строку if (isAnimating) return false; Очевидно, вам нужно установить isAnimating на false, как только анимация будет завершена, либо через таймер, либо с помощью какой-либо функции обратного вызова.

Это предотвратит двойную анимацию, не делая глупостей с DOM, которые могли бы повлиять на состояния при наведении, или я надеюсь, что это так!

Дай мне знать, если ты не это имел в виду, и я еще раз посмотрю на это!

Answer 4

Попробуйте установить курсор всех элементов, используя * подстановочный знак в jquery. Посмотрите, обновит ли это курсор.