jQuery - 当鼠标不在两个对象上时触发'mouseleave'事件

Question

如何启动jQuery的

mouseleave

当鼠标未在元素A和元素B上时发生的事件？

为了更好地理解，请参阅此处的示例。

将这两个元素封装在容器C中并从中激发事件不是一种选择，因为我在两个不同的表单元格中有elementA和elementB。

我并没有试图进行多元素选择（，）。我正在努力模仿逻辑AND（&&）。如上所述，当鼠标既不在elementA上也不在elementsB上时，必须触发事件。。。

我希望你能理解我的问题。。。

Answer 1

当鼠标进入任一元素时，这将添加一个类mouse_over。然后，当检测到mouseleave时，它将检查是否不存在mouse_over元素。setTimeout是允许mouseenter在mouseleave之前开火所必需的，并且可能需要额外的调整来消除竞争条件

工作Fiddle

$('.myDiv, .myDiv1').mouseenter(function () {
    $(this).addClass('mouse_over')
})
$('.myDiv, .myDiv1').mouseleave(function () {
    $this = $(this)
    timeoutId = setTimeout(function () {
        $this.removeClass('mouse_over')
        if ($('.mouse_over').length == 0) {
            console.log('not_in_either');
        }
    }, 1);
});

Answer 2

作为变量-例如，在mouseon时将class"hovered"设置为div，并在mouseleave时将其移除。

然后创建一个函数，检查elementA和elementB没有"悬停"类，如果两者都为true，则执行任何操作。将此函数绑定到elementA和elementB鼠标离开事件。

Answer 3

我已经更新了你的演示，点击按钮应该可以工作，你可以根据你的要求进行更改。

这是演示

$('.myDiv').mouseleave(function(){ console.log('out'); });
         $('input').click(function(){
              alert('a');
              $('.myDiv').trigger('mouseleave');
         });