开发者

jquery/IE mousemove event triggered as tooltip fades, but mouse isn't moving

开发者 https://www.devze.com 2023-03-12 02:00 出处:网络
I\'m trying to get a tooltip to work so that it fades out after it is shown. My code works great except in IE8 - the mousemove event (over an image) keeps getting triggered as the tooltip fades and it

I'm trying to get a tooltip to work so that it fades out after it is shown. My code works great except in IE8 - the mousemove event (over an image) keeps getting triggered as the tooltip fades and it creates a pulsating effect... fading in/out/in/out.

The problem has something to do wit开发者_运维技巧h the tooltip because if I get rid of the tooltip code, the mousemove event is only called when the mouse is moved.

You can see a simplified example here:

click to see simplified example (use IE8)


Yep, my idea for a fix seems to work:

ElementLooper.prototype = {
init: function(items, control, outer){
...
var self = this;
...
this.px = null;
this.py = null;
...
outer.mousemove(function(e) {
                  if (self.px == e.pageX && self.py == e.pageY) {
                    return;
                  }
                  self.px = e.pageX;  self.py = e.pageY;
                  self.show_control();
                });


Yep, I can reproduce this in IE7 and IE8, jquery-1.6.2

I've written an image slideshow that uses fadeIn()/fadeOut() to switch between images. If the mouse cursor is over the slideshow, the img title="..." tooltip appears when an image is switched in. When the tooltip disappears (the browser fades it after a few seconds), the mousemove() handler is called.

See the front page of http://davidhoulder.com for an example which currently (24 July 2011) provokes this bug in IE7/8. If I manage to fix or workaround this I'll update this answer.

One possible fix is to save .pageX and .pageY in the .mousemove() handler and just return if the mouse really hasn't moved.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号