javascript - 如果没有鼠标输入的Jquery条件

Question

让我们举个例子，我有4 divsdiv1,div2,div3,div4 所有四个 div 都彼此分开，现在我想在 jquery 中写一个条件，

1）if mouseleaves div1' and如果它没有进入 div3 或 div4`，那么我想运行一个函数或警告什么...

目前我通过检查来做到这一点if mouseenters div3 or div4。像这样的东西......

但我实际上想以相反的方式做......有可能实现这一目标吗？

$(".div11").mouseleave(function(){

if ( $(".div3,.div4").mouseenter)(function(){

 });

else{}

});

如您所知，上面的代码不起作用，因为如果其他条件我搞砸了，但是我正在尝试编写类似的东西...

Answer 1

是否可以？是的。开箱即用？不，您可能必须自己实现这一点。

为此，请考虑DOM 事件模型。为了实现“非鼠标输入”，您必须编写一个在每次鼠标移动时触发的自定义事件。它将检查光标相对于目标元素边界的位置，查看它是否在元素边界“内”（是否包括边距？填充？），如果不是，则调用传入的事件处理程序。

Answer 2

如果我正确理解您的问题，这将是正确的语法：

$(".div1").mouseleave(function () {

//Check if mouse is over div3 or div4
if ($('.div3').is(':hover') || $('.div4').is(':hover')) {
  //Do something    
    } 
else {

    }    
  });

你同意？

Answer 3

输入另一个 div 时应该使用变量...

例如：

var div3enter = false;
var div4enter = false;
$('.div3').mouseenter(function(){ div3enter = true; });
$('.div4').mouseenter(function(){ div4enter = true; });

$(".div11").mouseleave(function(){

if(div3enter and div4enter) {
//do something....
}

});

Answer 4

您可以使用基于超时的解决方案

jQuery(function($) {
    var timer;
    $(".div1").mouseleave(function() {
        timer = setTimeout(function() {
            alert('delayed');
        }, 100);
    });

    $(".div3,.div4").mouseenter(function() {
        clearTimeout(timer)
    });
})

演示：小提琴