Question

我正在使用此代码检测鼠标离开窗口并且工作正常。

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');
        }

        });

`

Answer 1

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

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

然后听取mouseenter和mouseleave：

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

<强> JSFiddle

Answer 2

试试此代码

＆＃13;

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

＆＃13;

Answer 3

为了检测mouseleave而不考虑滚动条和自动完成字段：

var Sonuc = [[{"ID":8,"Number":"1","Name":"Ahmet"}],   
[{"ID":7,"Number":"2","Name":"Semih"}], 
[{"ID":6,"Number":"3","Name":"Derviş"}],  
[{"ID":8,"Number":"4","Name":"Derviş"},{"ID":9,"Number":"4","Name":"Veli"}],
[{"ID":11,"Number":"44","Name":"Zeki"},{"ID":45,"Number":"44","Name":"Veli"}]];

for (var i = 0; i < Sonuc.length; i++) {
  var arr = Sonuc[i];
  for (var j = 0; j < arr.length; j++) {
    var obj = arr[j];
    console.log(obj.Number);
  }
}

鼠标离开窗口时检测

3 个答案: