鼠标离开浏览器窗口的Javascript修改

我有一个Javascript，当访问者的鼠标打破浏览器平面时，我用它来显示一个灯箱。。。这是我的页面：[http://mudchallenger.com/index-test2.html][1]

但是，如果您将鼠标移动得太快，它将无法识别您已离开页面，脚本也不会启动

是否有人知道如何修改此脚本，以便在窗口中没有鼠标时启动它

以下是脚本：

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
                    $('#exitpopup_bg').fadeIn();
                    $('#exitpopup').fadeIn();
                }
                oldPosition = position;
            } else {
                oldPosition = position;
            }
        }
        $('#divData').html(oldPosition + " : " + position);
    });

    $('#exitpopup_bg').click(function() {
        $('#exitpopup_bg').fadeOut();
        $('#exitpopup').slideUp();
    });
});

var oldPosition=-1；
$（文档）.ready（函数（）{
$（文档）.mousemove（函数（e）{
$（'exitpoup'）.css（'left'，（window.innerWidth/2-$（'exitpoup'）.width（）/2））；
$（'exitpoup'）.css（'top'，（window.innerHeight/2-$（'exitpoup'）.height（）/2））；
var position=e.pageY-$（窗口）.scrollTop（）；
如果（位置<10）{
如果（旧位置！=-1）{
如果（位置<旧位置）{
//显示退出弹出窗口
$（'exitpopup_bg'）.fadeIn（）；
$（'#exitpopup'）.fadeIn（）；
}
oldPosition=位置；
}否则{
oldPosition=位置；
}
}
$（'#divData'）.html（oldPosition+“：”+position）；
});
$（'#exitpopup_bg'）。单击（函数（）{
$（'#exitpopup_bg'）.fadeOut（）；
$（'#exitpoup'）.slideUp（）；
});
});

我将此标记包含在.html页面中

<?php require('exitpopup.php'); ?>

下面是“exitpoup.php”脚本

<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 < 20) {
            if(oldPosition != -1) {
                if(position < oldPosition) {
                    // Show the exit popup
                    $('#exitpopup_bg').fadeIn();
                    $('#exitpopup').fadeIn();
                }
                oldPosition = position;
            } else {
                oldPosition = position;
            }
        }
        $('#divData').html(oldPosition + " : " + position);


    });

    $('#exitpopup_bg').click(function() {
        $('#exitpopup_bg').fadeOut();
        $('#exitpopup').slideUp();
    });


});

</script>

<style type="text/css">

    #exitpopup
    {
        text-align:center;
    }

    #exitpopup h1
    {
        margin-top:0px;
        padding-top:0px;

    }   

    #exitpopup p
    {
        text-align:left;
    }

</style>



<div style="display: none; width:100%; height:100%; position:fixed; background:#000000; opacity: .9; filter:alpha(opacity=0.9); z-index:999998;" id="exitpopup_bg">




</div>
<div style="width:975px; height:575px; margin:0px auto; display:none; position:fixed; color:#000000; padding:0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; z-index:999999; background-image: url(exit-gate/exit-gate-bg2.png);" id="exitpopup">

</div>

var oldPosition=-1；
$（文档）.ready（函数（）{
$（文档）.mousemove（函数（e）{
$（'exitpoup'）.css（'left'，（window.innerWidth/2-$（'exitpoup'）.width（）/2））；
$（'exitpoup'）.css（'top'，（window.innerHeight/2-$（'exitpoup'）.height（）/2））；
var position=e.pageY-$（窗口）.scrollTop（）；
如果（位置<20）{
如果（旧位置！=-1）{
如果（位置<旧位置）{
//显示退出弹出窗口
$（'exitpopup_bg'）.fadeIn（）；
$（'#exitpopup'）.fadeIn（）；
}
oldPosition=位置；
}否则{
oldPosition=位置；
}
}
$（'#divData'）.html（oldPosition+“：”+position）；
});
$（'#exitpopup_bg'）。单击（函数（）{
$（'#exitpopup_bg'）.fadeOut（）；
$（'#exitpoup'）.slideUp（）；
});
});
#出口人口
{
文本对齐：居中；
}
#exitpopup h1
{
边际上限：0px；
填充顶部：0px；
}   
#出口人口
{
文本对齐：左对齐；
}

我认为你的定位过于复杂了

$('html').hover(
    function() {
        console.log('Entered browser window')
    },
    function() {
        console.log('Left browser window')
    }
)

检测进入/离开或仅使用“html”上的

.mouseleave（）

来检测鼠标何时离开。因此，在您的情况下，请删除整个

$（document）.mousemove

处理程序，并将其替换为

$('html').mouseleave(function() {
   $('#exitpopup_bg').fadeIn();
   $('#exitpopup').fadeIn();
})

---

根据需要添加弹出窗口的左/顶位置，但理想情况下，它应该只使用CSS

我认为您的定位过于复杂

$('html').hover(
    function() {
        console.log('Entered browser window')
    },
    function() {
        console.log('Left browser window')
    }
)

检测进入/离开或仅使用“html”上的

.mouseleave（）

来检测鼠标何时离开。因此，在您的情况下，请删除整个

$（document）.mousemove

处理程序，并将其替换为

$('html').mouseleave(function() {
   $('#exitpopup_bg').fadeIn();
   $('#exitpopup').fadeIn();
})

---

---

根据需要添加弹出窗口的左/顶部位置，但理想情况下，它应该仅使用CSS

您可以向我们显示您的html吗？嘿@ElliotM，就像整个html页面一样？我所做的只是在.html页面中包含php标记，它运行.php脚本。。。我有点新手，只是摸索和谷歌，直到我得到我想要的。我将编辑原始帖子并将其包含在其中。您是否曾经对询问您是否“确定要离开此页面”的营销网页感到恼火。这个比那个稍微好一点。你正在强迫一个视图在用户不知情的情况下进行更改。你能向我们展示你的html吗？嘿@ElliotM，就像整个html页面一样？我所做的只是在.html页面中包含php标记，它运行.php脚本。。。我有点新手，只是摸索和谷歌，直到我得到我想要的。我将编辑原始帖子并将其包含在其中。您是否曾经对询问您是否“确定要离开此页面”的营销网页感到恼火。这个比那个稍微好一点。您正在强制更改视图，而用户不想更改。感谢您的快速帮助！！因为我是这方面的新手，可能会花费大量的时间来弄清楚这一点，我应该用您建议的代码替换脚本中的什么内容？你能帮我把它放到上下文中吗？@user3089680更新我的答案，请让我知道它是否适用于uIs，有什么方法可以定制更多？如果鼠标离开窗口但仍在浏览器中？很难解释，但我不想让它触发脚本，如果他们意外地将鼠标移到一边。。这有道理吗？有道理，但我认为这是不可能的。JavaScript控制浏览器窗口内的任何内容，但不控制窗口外的任何内容。@Malachi您可以简单地传递

事件

对象并检查

clientY

属性-这里是一个小演示-您可以添加一些代码来检测侧面的移动，谢谢您的快速帮助！！因为我是这方面的新手，可能会花费大量的时间来弄清楚这一点，我应该用您建议的代码替换脚本中的什么内容？你能帮我把它放到上下文中吗？@user3089680更新我的答案，请让我知道它是否适用于uIs，有什么方法可以定制更多？如果鼠标离开窗口但仍在浏览器中？很难解释，但我不想让它触发脚本，如果他们意外地将鼠标移到一边。。这有道理吗？有道理，但我认为这是不可能的。JavaScript c