CODEWITHSUNDEEP
javascriptjquerymouseevent
Arjun S Kumar
Arjun S Kumar

Reputation: 376

Trigger jQuery mousemove event only once

I'm trying to make an exit popup and I could do that using the following code. Whenever the user's mouse move out of the browser area, this gives a popup. But it is quite annoying when the popup comes everytime. I want to limit it to just a single time. Can somebody help me with this?

jQuery(document).ready(function () {
    jQuery(document).mousemove(function(e) {
        jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
        jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
        if(e.pageY <= 5)
        {
            // Show the exit popup
            jQuery('#exitpopup_bg').fadeIn();
            jQuery('#exitpopup').fadeIn();
        }
    });
});

Upvotes: 3

Views: 4656

Answers (4)

brokethebuildagain
brokethebuildagain

Reputation: 2191

Use jQuery's one() function: http://api.jquery.com/one/

jQuery(document).ready(function () {
        jQuery(document).one('mousemove', function(e) {
            jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
            jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
            if(e.pageY <= 5)
            {   
                // Show the exit popup
                jQuery('#exitpopup_bg').fadeIn();
                jQuery('#exitpopup').fadeIn();
            }
        });
});

Upvotes: 2

Ben
Ben

Reputation: 331

A few things here. First, for form's sake, you should move your CSS alterations inside the if block, because you really don't need those to run every time the user moves their mouse, just right before you show the popup:

if(e.pageY <= 5)
{   
    // Alter CSS as appropriate
    jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
    jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));

    // Show the exit popup
    jQuery('#exitpopup_bg').fadeIn();
    jQuery('#exitpopup').fadeIn();
}

Second, you'll probably want to avoid showing it a second time by detaching the event handler. I'd recommend you use the jQuery .on() and .off() syntax instead of the shorthand .mousemove() because it'll be easier to read and maintain. I also recommend you use namespaces on your events so you can ensure that you're not detaching events that might have been set in other scripts.

jQuery(document).on('mousemove.yourNamespace', function (e) {
    if(e.pageY <= 5)
    {   
        // Alter CSS as appropriate
        jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
        jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));

        // Show the exit popup
        jQuery('#exitpopup_bg').fadeIn();
        jQuery('#exitpopup').fadeIn();

        // now detach the event handler so it won't fire again
        jQuery(document).off('mousemove.yourNamespace');
    }
}

Lastly, if you wrap all of this code in an IIFE, you won't have to write out jQuery every time, and you still won't have to worry about possible conflicts with $ in the global namespace.

(function ($) {
    $(document).on('mousemove.yourNamespace', function (e) {
        if(e.pageY <= 5)
        {   
            // Alter CSS as appropriate
            $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
            $('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));

            // Show the exit popup
            $('#exitpopup_bg').fadeIn();
            $('#exitpopup').fadeIn();

            // now detach the event handler so it won't fire again
            $(document).off('mousemove.yourNamespace');
        }
    }
})(jQuery);

jQuery docs for .on(), .off(), and event.namespace for reference.

Upvotes: 0

nanobar
nanobar

Reputation: 66355

(function($) {

    $(document).ready(function () {
        var leftPage = false;
        $(document).mousemove(function(e) {

            if(e.pageY <= 5)
            {
                if (!leftPage) {
                    var exitPopup = $('#exitpopup');
                    exitPopup.css('left', (window.innerWidth/2 - exitPopup.width()/2));
                    exitPopup.css('top', (window.innerHeight/2 - exitPopup.height()/2));
                    $('#exitpopup_bg').fadeIn();
                    exitPopup.fadeIn();
                }

                leftPage = true;
            } else {
                leftPage = false;
            }
        });
    });

})(jQuery);

"If the user leaves the page AND they have not already left THEN set popup. Next mark that they have left the page (leftPage = true)"

"Do not try and set the popup again until they are back in the page"

Couple of extras:

  • Instead of calling jQuery all the time we wrap the whole thing in a function wrapper so you can use $.
  • Instead of doing this everytime $('#exitpopup'); we CACHE it to a variable exitPopup so it doesn't have to do the lookup every time (inefficient)

Upvotes: 0

Pablo Matias Gomez
Pablo Matias Gomez

Reputation: 6813

Insert this:

e.stopPropagation();

just at the first list of the mousemouve function.

....
jQuery(document).mousemove(function(e) {
     e.stopPropagation();
    jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
    ...

Upvotes: 0

Related Questions