1

我正在尝试将此调整用于我的博客：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：当您快速将鼠标拖出页面时，什么也没有出现。那么，我如何确保它在这种情况下也能正常工作？

4

2 回答 2

0

1）这段代码是说如果光标进入页面的前 10 个像素，以显示弹出窗口，是否有人试图退出。下移时仍满足页面前10像素条件的情况。

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

解决这个问题的建议是使用onbeforeunload浏览器事件来询问用户是想留下还是真的离开页面：

检测用户何时离开网页的最佳方法？

于 2012-12-25T04:09:51.320 回答
0

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

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

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

if(position < 10){
    ...
} else {
    oldPosition = -1;
}

问题 2 的运行速度与浏览器可以提供脚本 mousemove 事件一样快。你对此无能为力。

于 2012-12-25T04:24:52.537 回答