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

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

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

Проблема возникает, когда анимация завершается, и div удаляется. Указатель мыши находится над кнопкой, но состояние зависания не активно, пока пользователь фактически не переместит мышь, тогда указатель мыши изменится, и все будет хорошо.

Обратите внимание, что клик по-прежнему работает - это чисто косметическая (но раздражающая) аберрация.

Могу ли я заставить браузер повторно оценить точку под курсором?

Ответ 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');

Ответ 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, который повлияет на состояния зависания, или я надеюсь.

Сообщите мне, если это не то, что вы имели в виду, и я еще раз посмотрю на это!