Question

我试图将此调整用于我的博客：http://www.tonylea.com/2011/creating-a-jquery-exit-popup/#comment-909

基本上它的作用是只有当你的鼠标向上移出页面时才会显示弹出窗口。

以下是代码：

<script type="text/javascript">

    var oldPosition = -1;
    $(document).ready(function() {
        $(document).mousemove(function(e) {
            $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
            $('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));

            var position = e.pageY - $(window).scrollTop();
            if(position < 10){
                if(oldPosition != -1){
                    if(position < oldPosition){
                        // Show the exit popup
                        // make sure it's moving upward
                            $('#exitpopup_bg').fadeIn();
                            $('#exitpopup').fadeIn();

                    }
                    oldPosition = position;
                }else{
                    oldPosition = position;
                }
            }
            // $('#divData').html(oldPosition + " : " + position);
        });

        $('#exitpopup_bg').click(function(){
            $('#exitpopup_bg').fadeOut();
            $('#exitpopup').slideUp();
        });
    });
</script>

问题1：虽然我没有看到代码中存在任何问题，但当您的鼠标向下移动到页面时，弹出窗口也会显示，为什么会这样？

问题2：当您快速将鼠标拖出页面时，不会显示任何内容。那么，我如何确保它在这种情况下也能正常工作？

Answer 1

1）此代码说明光标是否进入页面的前10个像素，以显示弹出窗口，是否有人试图退出。当你向下移动时，它仍然符合在页面的前10个像素中的条件。

2）当您快速移动鼠标时，它可能不会触发事件，因为它会以特定速率触发鼠标移动事件，因此当鼠标移动太快时，事件实际上不会被捕获。没有什么可以做的，计算机，操作系统和浏览器决定了这个速度。

建议解决此问题的方法是使用onbeforeunload浏览器事件询问用户是否要留下或真正离开页面：

Best way to detect when a user leaves a web page?

Answer 2

您的脚本存在的部分问题是，当它们不在10px范围内时，您永远不会将oldPosition重置为-1。

如果它们在浏览器向下移动之外，它会将oldPosition设置为一个值。现在将鼠标从浏览器中移出（向右，向左或向下）并再次向上拖动它，如果新位置小于oldPosition，即使它们没有向上移动，脚本也会触发。

要解决问题1 ，请使您的第一个if语句包含重置else的{{1}}：

oldPosition

问题No.2只会像浏览器提供脚本mousemove事件一样快。你无能为力。

Jquery退出弹出窗口

2 个答案: