javascript - 取消 hoverIntent 计时器

Question

我多次使用 jQuery 和 hoverIntent 插件，下拉菜单和高级导航应该更优雅一些。但是我遇到了一个问题。

我有一个带有可点击 li 元素的菜单，该元素也有悬停。 如果有人在 intent 计时器触发之前点击它，我想取消 hoverintent，只是因为它看起来更好。

不过我不知道怎么做，首先是设计师，其次是编码员。这就是所谓的意图:

$('#navigationContainer ul li').hoverIntent(configDown);

它有一个定义敏感度等的变量 configDown，以及两个名为 slideUp 和 slideDown 的函数。一切都很完美。

如果有人点击同一个元素，我想取消 hoverIntent。任何帮助将不胜感激。

Answer 1

不是取消 hoverIntent，而是修改 hoverIntent 回调中的代码以首先检查 li 是否被单击:

var configDown = {
    slideUp: function () {
        if ($(this).hasClass('no-intent')) return;
        // slide up
    },
    slideDown: function () {
        if ($(this).hasClass('no-intent')) return;
        // slide down
    }
};

$('#navigationContainer ul li').click(function () {
    $(this).addClass('no-intent');
}).hoverIntent(configDown);

除非你在 hoverIntent 上有一个很好的延迟，否则正确触发它可能会很棘手(你可能会在 hoverIntent 被触发后立即点击)，但基本的想法是你可以调整的。