logo标签列表

检测鼠标离开窗口的事件

javascriptjquery
4
我正在使用这段代码来检测鼠标离开窗口，它运行得非常好。
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');
        }

        });

`

https://dev59.com/CnNA5IYBdhLWcg3wh-cC#3187524 对你有用吗？ - JosiahDaniels
我不相信这是可能的；Google Chrome似乎将滚动条视为“文档”和“窗口”的“外部”。 - Steffan Donal
抱歉，我必须删除我的回答，因为有一个人。回答你的问题，@Atul，你可以使用 element.width - element.scrollWidth。不确定是否有效，但可以试试！ - Praveen Kumar Purushothaman
3个回答
2

这个方法并不十分优雅，但你可以将页面包裹在一个 <div> 中，并使其可滚动：

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

然后监听它的 mouseenter 和 mouseleave 事件：

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

JSFiddle

1
为了在不考虑滚动条和自动完成字段的情况下检测mouseleave：
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");

  }
});
0

试试这段代码

 <!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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接