Question

我有一个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();
    });
});

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

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

这是'exitpopup.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>

Answer 1

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

$('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中

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

1 个答案: