JavaScript/jQuery不在元素上

Question

我該如何創建一個元素的操作，當用戶不在它上面時會改變它。 mouseover和mouseleave不能應用在這種情況下，因爲該元素在頁面加載時被激活並且鼠標位置可以在元素之外。

這裏的條件：

if mouse is not over element: 
    close element 
else: 
    do nothing 

所以我想知道的是我怎麼能與jQuery/JavaScript的檢查，如果當前鼠標的位置是不特定的元素。

謝謝！

Answer 1

你可以綁定的事件處理程序的身體和檢查請求的目標：

$().ready(function() { 
    $("body").on('mouseover',function(event) { 
     if($(event.target).attr('id') === 'yourid') { 
      console.log('do close this element'); 
     } else { 
      console.log('do nothing'); 
     } 
    }); 
}); 

Answer 2

我會使用一個全局布爾值來跟蹤鼠標是否在當前盤旋在元素上。然後，您可以定期檢查使用setInterval（具有一定合理的時間間隔）的布爾值，這將決定該元素是否應該隱藏。

var mouseIsOver = false; 

$('#elementId').hover(
    function() { 
    mouseIsOver = true; 
    }, 
    function() { 
    mouseIsOver = false; 
    } 
); 

setInterval(function() { 
    if (mouseIsOver == false) { 
    $('#elementId').fadeOut(); 
    } 
}, 250); 

Answer 3

有一個輝煌的jQuery插件只是這一點。它被稱爲jQuery外部事件。

檢查網頁瀏覽：http://benalman.com/code/projects/jquery-outside-events/docs/files/jquery-ba-outside-events-js.html

用法超級簡單和直接的。我早些時候會推薦這個很好的經驗。