JavaScript mouseenter event not working when mouse is down
I have an <input type="range">
scroll and a div
that on mouseover
and mouseleave
changes its background. You can see the working cod开发者_开发百科e here: http://jsfiddle.net/y8S57/ , please use a Webkit browser as type="range"
works only on Webkit.
The problem is that if the mouse is down on the type="range"
button and enters the mouseover
and mouseleave
zone the respective events are not triggered. Somehow using the type="range"
cancels the other events that should be happening.
How can I fix this so when I drag the <input type="range">
and my mouse is over that mouseover
div
the mouseover
event to trigger?
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"});
});
Unfortunately it looks like WebKit just isn't firing mouse events on other elements here. All I can offer you is how to shorten your code down:
$("#zone").hover(function(){
$(this).css({background:"red"});
}, function(){
$(this).css({background:"black"});
});
This isn't a bug you can fix (and may certainly be intentional behavior by the browser), posting it on the WebKit Bugzilla will do the most good here. By intentional I mean they probably actively do this for other reasons, for example when you go crazy dragging you wouldn't want to trigger a flyout menu that covers the slider all the sudden.
精彩评论