如何使用 hoverIntent 插件？

Question

我是 jQuery 新手，想将 hoverIntent 插件作为导航菜单添加到我的网站。我被推荐给 Brian Cherne 的 site 并查看要下载的代码，但我不太确定如何将它们组合在一起以使其工作。

有人可以发布一个示例，说明添加了适当的 hoverIntent 插件代码后的 HTML 代码应该是什么样子的吗？或者让我参考一下？

我将不胜感激！谢谢！

Answer 1

hoverIntent 插件遵循与 jQuery hover 方法完全相同的 api 签名。 您可以在http://cherne.net/brian/resources/jquery.hoverIntent.html 获取使用示例，只需查看源代码即可。

首先在头部包含jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

下载并包含 hoverIntent 插件之后：

<script type="text/javascript" src="path/to/jquery.hoverIntent.js"></script>

那么你可以在任何这样的jQuery元素上使用hoverIntent()方法

$(element).hoverIntent(whatToDoWhenHover, whatToDoWhenOut);

element 是一个jQuery selector，如'#id' 或'.class' 或'div > .something'、whatToDoWhenHover 和whatToDoWhenOut 是当用户开始悬停元素和停止时将执行的函数。就像老好jQuery hover。

Example

Answer 2

如果你希望在不依赖 jQuery 的情况下使用 hoverIntent 功能，你可以使用它的 Pure JavaScript ES6 版本（或轻松地将其转换为 es5）。

const hoverIntent = (el, onOver, onOut) => {
    let x;
    let y;
    let pX;
    let pY;
    const h = {};
    let state = 0;
    let timer = 0;

    let options = {
        sensitivity: 7,
        interval: 100,
        timeout: 0,
        handleFocus: false,
        overClass: 'hovered'
    };

    const delay = e => {
        if (timer) timer = clearTimeout(timer);
        state = 0;
        if (onOut) {
            return onOut.call(el, e);
        }
        el.classList.remove(options.overClass);
        return false;
    };

    const tracker = e => {
        x = e.clientX;
        y = e.clientY;
    };

    const compare = e => {
        if (timer) timer = clearTimeout(timer);
        if (Math.abs(pX - x) + Math.abs(pY - y) < options.sensitivity) {
            state = 1;
            if (onOver) {
                return onOver.call(el, e);
            }
            el.classList.add(options.overClass);
            return false;
        }
        pX = x;
        pY = y;
        timer = setTimeout(() => {
            compare(e);
        }, options.interval);
        return false;
    };

    // Public methods

    const dispatchOver = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state !== 1) {
            pX = e.clientX;
            pY = e.clientY;

            el.addEventListener('mousemove', tracker, false);

            timer = setTimeout(() => {
                compare(e);
            }, options.interval);
        }

        return this;
    };

    const dispatchOut = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state === 1) {
            timer = setTimeout(() => {
                delay(e);
            }, options.timeout);
        }

        return this;
    };

    if (el) {
        el.addEventListener('mouseover', dispatchOver, false);
        el.addEventListener('mouseout', dispatchOut, false);
    }

    h.options = opt => {
        options = { ...options, ...opt };
        return h;
    };

    h.remove = () => {
        if (!el) return;
        el.removeEventListener('mouseover', dispatchOver, false);
        el.removeEventListener('mouseout', dispatchOut, false);
    };

    return h;
};

用法：

const menuEl = document.querySelector('.menu');
hoverIntent(menuEl);

这将为菜单元素添加“悬停”类，然后您可以在父菜单项悬停时使用纯 CSS 启用/禁用子下拉框

• 提示： 而不是为每个菜单项运行 hoverIntent；仅针对 1 个元素（即 menu-wrapper 元素）运行它，并为 parent-menu-items 元素添加简单的 CSS 悬停规则以显示下拉框；基于 menu-wrapper 是否已经悬停，性能效率会更高;) *

css 类似于;

.menu.hovered .parent-li:hover {
    background-color: #f4f4f4;
}
.menu.hovered .parent-li:hover .child {
    display: block;
}

我创建了一个游乐场，请看现场演示：

https://codepen.io/mcakir/full/OJVJmdV

高级用法：hoverIntent 方法接受onOver 和onOut 以及扩展options。

示例：

const onOverHandler = () => {
    console.log('mouse in!');
    // do something
}
const onOutHandler = () => {
    console.log('mouse out!');
    // do something
}
const customOptions = () => {
    sensitivity: 7,
    interval: 300,
    timeout: 200,
}
const menuEl = document.querySelector('.menu');
hoverIntent(menuEl, onOverHandler, onOutHandler).options(customOptions);