Jquery - 为mouseout扩展'perimeter'的技术？

Question

我想实现这样的行为,当鼠标指针悬停在某个div上时会触发mouseover/hover事件,但是当指针离开div时,mouseout事件不会触发,但是当它离开10px区域时我们就会触发div .

有没有办法实现这个不涉及创建一个更大的父div来绑定mouseout事件？

Answer 1

我的评论让我感兴趣,看看它是否可能,而且实际上很容易.不知道它在不同的浏览器和大量的div中运行得如何,但它在这个例子中起作用:

http://jsbin.com/exulef/2/edit

var hello = $('#hello');
var position = hello.offset();
var height = hello.height();
var width = hello.width();

$(document).mousemove(function(e) {
  if (hello.data('inside')) {
    if ((e.pageX < position.left - 10 || e.pageX > position.left + width + 10) || 
       (e.pageY < position.top - 10 || e.pageY > position.top + height + 10)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Outside")
        .data('inside', false);
    }
  }
  else {
    if ((e.pageX > position.left && e.pageX < position.left + width) && 
        (e.pageY > position.top && e.pageY < position.top + height)) {
      hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + "  Inside")
        .data('inside', true);
    }
  }  
});

你好只是一个方形div.很容易变成一个插件,我可能会在以后再做,哈哈.

编辑 - 我最终把它变成了一个插件:http://jmonkee.net/wordpress/2011/09/07/jquery-extended-hover-plugin/

Answer 2

嗯，我会选择将所需的 div 包装在另一个 div 中并在其上绑定 mouseout - 这将是最可靠的解决方案。

但是，如果您坚持不创建另一个 div，那么我将绑定自定义 mousemove 处理程序，该处理程序将绑定（在文档上）在 div 上的 mouseenter 上，并且会检测鼠标从 div 边界框移开超过 10px 的事实。如果是这样，mousemove 处理程序将触发自定义 jQuery 事件，然后它会自行解除绑定。