最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I avoid massive onmouseover onmouseout firing? - Stack Overflow

programmeradmin1浏览0评论

I have a table with some columns. In each of them is a picture where I have an onmouseover/onmouseout event on it, which shows a message in a div and hides the message.

My problem is, after a user moves quickly from left to right over a lot of images, all mouseover and mouseout events of the images are executed, which looks stupid...

Is it possible to rearrange the internal event stack to avoid this, such that the user executes only the current event (mostly the first one) and then the last one, if it is not the same type?

For example, if mouseover over first image is executed and the mouse moving position stops over an image three times next to the first one. I can avoid all other events firing, because the mouse stopped over an image and the mouseover is like the one where I stopped with the mouse.

How can I avoid this multiple event firing?

I have a table with some columns. In each of them is a picture where I have an onmouseover/onmouseout event on it, which shows a message in a div and hides the message.

My problem is, after a user moves quickly from left to right over a lot of images, all mouseover and mouseout events of the images are executed, which looks stupid...

Is it possible to rearrange the internal event stack to avoid this, such that the user executes only the current event (mostly the first one) and then the last one, if it is not the same type?

For example, if mouseover over first image is executed and the mouse moving position stops over an image three times next to the first one. I can avoid all other events firing, because the mouse stopped over an image and the mouseover is like the one where I stopped with the mouse.

How can I avoid this multiple event firing?

Share Improve this question edited Sep 14, 2015 at 16:33 Makoto 107k27 gold badges197 silver badges235 bronze badges asked Aug 10, 2009 at 8:38 stephanstephan 2,3414 gold badges19 silver badges15 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 2

You need to check out the hoverIntent plugin, which addresses this problem.

We've had the exact same problem, What we've done is on the mouseover event is to set a variable _mouseOn to true (set to false on mouseout) then set a oneTime event over that fires in say 500 ms.. The one time event will check if the _mouseOn is true and display the image

    function Hover() {
  _mouseOn = true;
  $(document).oneTime(500, "500ms", functionToCheckTheMouseOnAndDisplayTheImage);
};
//Global timeout handle for mouseover and mouseout
var timeoutHandle;

$(document).ready(function() {

    BindMouseHover($(".helptext")); 

});//closing ready

//bind mouseover and mouseout actions on all elements 
function BindMouseHover(elements) {            
    $(elements).hover(
        function() {
            timeoutHandle = setTimeout('HandleMouseHover(true)', 1000);
        },
        function() {
            HandleMouseHover(false);
        }
    );
}

//Handle Mouseover and mouseout events
function HandleMouseHover(bDelay) {
    if (bDelay) {                
        $(".tooltip").show();
    }
    else {
        $(".tooltip").hide();
        clearTimeout(timeoutHandle);
    }
}

Explanation: On every mouseover schedule a call to DelayedTooltip(***true*)** after 1000ms and save the setTimeout handle to timeoutHandle

If mouseout happens within that 1000ms interval then simply call clearTimeout(***timeoutHandle*)** to cancel the setTimeout

This can be easily extended to apply to many heterogeneous elements and wire the customize tooltip text based on the element hovered.

Click here to know more about JavaScript Timing Events.

You can't, and shouldn't try to, avoid the events firing. What you should avoid is your code immediately responding to them by doing something that winds up looking stupid. For example, you can have your mouseovers register, with some controller object, which image the user is currently over, and set a short timeout to the function that triggers the actual behavior (removing a previous timeout if it's already running). The mouseout unregisters the image and removes the timeout. That way, when the behavior runs, you only operate on the image that the user moused over most recently.

I think it's better (from http://bavotasan./demos/fadehover/, THANKS)

<script> 
$(document).ready(function(){
    $(".a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });

});
</script> 
发布评论

评论列表(0)

  1. 暂无评论