JavaScript mouseenter event not working when mouse is down

Question

I have an <input type="range"> scroll and a div that on mouseover and mouseleave changes its background. You can see the working code 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"});
});

Nick Craver · Accepted Answer · 2010-11-18 10:58:16Z

3

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.

answered Nov 18, 2010 at 10:58

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mircea Over a year ago

Thanx Nick. I think that this is intentionaland not a bug but I was looking for a way to bypass this. It looks like mousedown is canceling all the other events out there and there is nothing I can do about that.

Nick Craver Over a year ago

@Mircea - I have to agree, not much you can do here...and like the example I gave above I do understand why they'd choose to do this...I don't think the behavior's going anywhere.

Mircea Over a year ago

I understand. I will mark this answer as accepted as there is no solution to this at this time. Thanx

Nishant Kumar Over a year ago

Thanks nick it's working great for div. This is great alternative for $("#divMain").mouseove(function () { $(this).css("overflow", "auto"); isRefresh = "false"; }).mouseout(function () { $(this).css("overflow", "hidden").scrollTop(1); isRefresh = "true"; });

Collectives™ on Stack Overflow

JavaScript mouseenter event not working when mouse is down

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related