Jquery - 延迟 mouseout 事件

Posted 2023-03-04

【中文标题】Jquery - 延迟 mouseout 事件

【英文标题】：Jquery - Delay mouseout event

【发布时间】：2011-01-17 01:35:58

【问题描述】：

有没有办法让 jQuery 在触发 mouseout 事件之前等待一段时间？

目前它触发得太早了，我宁愿等待 500 毫秒，然后再评估鼠标。下面是我使用的代码示例。

$('.under-construction',this).bind(
    mousemove: function(e) 
        setToolTipPosition(this,e);
        css('cursor' : 'crosshair' );
    ,
    mouseover: function() 
        $c('show!');
        showUnderConstruction();
    ,
    mouseout: function() 
        $c('hide!');
        hideUnderConstruction();
    ,
    click: function() 
        return false;
    
);

有没有 jQuery 方法可以做到这一点，还是我必须自己做？

【问题讨论】：

showUnderConstruction().delay(500); hideUnderConstruction().delay(500);

【参考方案1】：

将mouseout 中的逻辑拆分为另一个函数。在mouseout 中甚至使用setTimeout("myMouseOut", 500) 调用此函数。如果用户移动到新元素，您可以将mouseover 事件与clearTimeout() 结合起来重置计时器。

【参考方案2】：

您始终可以将您的逻辑包装在 setTimeout() 函数中。

mouseout: function() 
  setTimeout(function()
    $c('hide!');
    hideUnderConstruction();
  , 500);

【参考方案3】：

您可以查看hoverIntent plugin 让您定义一些有助于鼠标输入/输出交互的变量