检测鼠标何时离开窗口答案

【问题标题】：Detect when mouse leaves window检测鼠标何时离开窗口
【发布时间】：2015-09-03 22:20:00
【问题描述】：

我正在使用此代码来检测鼠标离开窗口，并且效果很好。

jQuery(document).mouseleave(function(){console.log('out')})
jQuery(document).mouseenter(function(){console.log('in')});

但在 chrome 中，即使在触摸滚动条时也会返回鼠标离开。我怎样才能防止这种情况？请指教。

我正在使用此代码 `addEvent(document, "mouseleave", function(e) {

    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;

    jQuery(document).mouseleave(function(){
        if (!from || from.nodeName == "HTML") {

        $(".tso_popup_wrapper")
          .animate({"width":"400px","height":"200px"},100)
          .animate({"right":"100px", "top":"107px"},500)
          .animate({"width":"1000px", "height":"700px"},1)
          .animate({"right":"-100px", "top":"107px"},1)
          .animate({"width":"1350px", "height":"700px"},1)
          .animate({"right":"-298px", "top":"107px"},250);
          $('.navigation-all').slideDown(300);
          console.log('out');
        }

        });

【问题讨论】：

stackoverflow.com/a/3187524/1106901 适合你吗？
我不相信这是可能的；谷歌浏览器似乎将滚动条视为document 和window 的“外部”。
对不起，因为一个人，我不得不删除我的答案。要回答您的问题，@Atul 您可以使用element.width - element.scrollWidth。还不确定，但试一试！

标签： javascript jquery

【解决方案1】：

这很 hacky，但您可以将页面包装在 <div> 中，使其可滚动：

html, body, .page-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

然后听mouseenter和mouseleave就可以了：

$('.page-container').hover(handlerIn, handlerOut);

JSFiddle

【讨论】：

【解决方案2】：

为了在不考虑滚动条和自动完成字段的情况下检测鼠标离开：

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

【讨论】：

【解决方案3】：

试试这个代码

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseleave demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    })
    .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
    });
    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    })
    .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
    });
    </script>
    </body>
    </html>

【讨论】：