Javascript mouseenter событие не работает, когда мышь не работает

Question

У меня есть свиток <input type="range"> и div, которые на mouseover и mouseleave меняют фон.Вы можете увидеть рабочий код здесь: http://jsfiddle.net/y8S57/, пожалуйста, используйте браузер Webkit, так как type="range" работает только на Webkit.

Проблема в том, что, если мышь нажата на кнопку type="range"и входит в зону mouseover и mouseleave, соответствующие события не инициируются.Каким-то образом использование type="range" отменяет другие события, которые должны происходить.

Как я могу это исправить, когда я перетаскиваю <input type="range"> и моя мышь находится над этим mouseover div mouseoverсобытие для запуска?

HTML:

<input id="zoom" type="range" name="zoom" min="10" max="100" step="1" value="40" >
<div id="zone"></div>

JavaScript:

$("#zone").mouseenter(function(){
   $(this).css({background:"red"});
});

$("#zone").mouseleave(function(){
   $(this).css({background:"black"});
});

Answer 1

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

$("#zone").hover(function(){
   $(this).css({background:"red"});
}, function(){
   $(this).css({background:"black"});
});

Это не ошибка, которую вы можете исправить (и, безусловно, это может быть преднамеренное поведение браузера), размещение ее на WebKit Bugzilla принесет здесь наибольшую пользу. Под преднамеренным я подразумеваю, что они, вероятно, активно делают это по другим причинам, например, когда вы сходите с ума, перетаскивая, вы не захотите вызвать всплывающее меню, которое внезапно закрывает ползунок.