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

用法非常简单直接。我会推荐这个，之前有丰富的经验。