如果 mousedown 在 mouseover 事件中触发，则立即返回并且不执行链接的 mouseout 事件

Question

不知道该怎么做，但基本上我写了一个工具提示插件，它删除了mouseout 或mousedown 上的工具提示。

如果触发了mousedown 事件，它将删除$that.parent()，这很好，这会删除工具提示，但是如果用户还触发了 mouseout 事件（他们会因为 mouseover 和 @ 987654326@ 事件当前被链接），然后它将删除另一个我不想要的 DOM 元素。所以基本上我想知道这是否可能：

$that.on('mouseover', function() {

    // If this event is triggered within the mouseover event, don't run the chained mouseout event
    $that.on('mousedown', function() {
        $that.parent().next().fadeOut(100).remove();
        return false;
    });
}).mouseout(function() {
  // If they clicked above, don't run this
    $that.parent().next().fadeOut(100).remove();
});​

据我所知，如果不使用全局变量，很难访问 clicked 事件中的 clicked 布尔集，例如：

$that.on('mouseover', function() {
    clicked = false;
    // If this event is triggered within the mouseover event, don't run the chained mouseout event
    $that.on('mousedown', function() {
        clicked = true;
        $that.parent().next().fadeOut(100).remove();
        return false;
    });
}).mouseout(function() {
    // If they clicked above, don't run this
    if (clicked) {
        $that.parent().next().fadeOut(100).remove();
    }
});​

关于如何优雅地构建它有什么想法吗？

编辑：$that.parent().next() 中的元素只是 <div class="js-tooltip"><span>Tooltip text</span></div>

但这应该无关紧要，因为我只想知道如果在不使用全局变量的情况下触发了 mousedown，是否可以从该 mouseover 函数返回。

Answer 1

您不需要mouseover。

$that.on('mouseleave mouseup', function(e) {
     if( e.type === 'mouseleave'){
         // do the mouseleave stuff
     }else{
         // do the mouseup stuff
     }
});​

---

如你所说，如果元素是动态创建的，你应该使用：

$(document).on('mouseleave mouseup', $that, function(e) {

Answer 2

您是否考虑过像这样简单地使用类过滤器？

$that.parent().next('.js-tooltip').fadeOut(100).remove();

如果下一个不是工具提示，这根本不会做任何事情，据我所知，这应该可以解决问题。

使用您提出的方法，$that.clicked = false 会更清晰。

或者怎么样（如果你想保持鼠标悬停 - 这只是为了演示原理；我不确定它是否会这样工作）：

$that.on('mouseover', function() {

    // If this event is triggered within the mouseover event, don't run the chained mouseout event
    $that.on('mousedown mouseout', function() {
        $that.parent().next().fadeOut(100).remove();
        $that.off('mousedown mouseout'); //prevent that happening again
        return false;
    });
});