取消hoverIntent定时器

Question

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

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

我不知道怎么做，设计师第一，编码器第二。这就是所谓的意图：

$('#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之后单击)，但是基本的想法是要进行调整。