2015-06-18 3 views
1

Я использую этот код, чтобы обнаружить окно останова мыши и работает очень хорошо.Обнаруживать, когда окно мыши покидает окно

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

, но в хромах это возвращает мышь, даже при касании полосы прокрутки. Как я могу это предотвратить? Пожалуйста, совет.

Я использую этот код `addEvent (документ, "MouseLeave", функция (е) {

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

     }); 

`

+0

Работает ли http://stackoverflow.com/a/3187524/1106901? – JosiahDaniels

+0

Я не верю, что это возможно; Google Chrome считает, что полосы прокрутки являются «внешними» для «документа», а также для «окна». –

+0

Извините, я должен удалить свой ответ из-за одного человека. Чтобы ответить на ваш вопрос, @Atul Вы можете использовать 'element.width - element.scrollWidth'. Не уверен, но попробуй! –

ответ

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>

+0

сэр это не работает для меня .... добавил мой код в вопрос – Atul

1

Это хаки, но вы можете обернуть страницу в <div>, сделать его прокручивать:

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

А потом слушать mouseenter и mouseleave на нем:

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

JSFiddle

0

Для того, чтобы обнаружить 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"); 

    } 
}); 
Смежные вопросы