Question

我正在尝试进行退出弹出，我可以使用以下代码执行此操作。每当用户的鼠标移出浏览器区域时，都会弹出一个弹出窗口。但每次弹出窗口时都很烦人。我想将它限制在一次。有人可以帮我吗？

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();
        }
    });
});

Answer 1

使用jQuery＆＃39; one()函数：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();
            }
        });
});

Answer 2

插入此内容：

e.stopPropagation();

只是在mousemouve函数的第一个列表中。

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

Answer 3

(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);

＆＃34;如果用户离开页面并且他们还没有离开那么设置弹出窗口。接下来标记他们离开页面（leftPage = true）＆＃34;

＆＃34;在他们回到页面之前，不要再尝试设置弹出窗口＆＃34;

额外的一对：

我们不是一直调用jQuery，而是将整个事物包装在函数包装器中，以便您可以使用$。
我们不是每次都$('#exitpopup');执行此操作，而是将其缓存到变量exitPopup，因此每次都不必进行查找（效率低下）

Answer 4

这里有一些事情。首先，为了表单的缘故，你应该在if块内移动你的CSS变更，因为你真的不需要每次用户移动鼠标时运行它们，就在你显示弹出窗口之前：

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();
}

其次，您可能希望通过分离事件处理程序来避免再次显示它。我建议您使用jQuery .on()和.off()语法而不是简写.mousemove()，因为它更易于阅读和维护。我还建议您在事件中使用命名空间，这样您就可以确保不会分离可能已在其他脚本中设置的事件。

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');
    }
}

最后，如果您将所有代码都包含在IIFE中，则不必每次都写出jQuery，而您仍然不必担心可能与{ {1}}在全局命名空间中。

.on()，.off()和event.namespace的jQuery文档供参考。

仅触发jQuery mousemove事件一次

4 个答案: