jquery - 如何使用 hoverIntent 插件？

Question

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

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

我将不胜感激！谢谢！

Answer 1

hoverIntenthover插件遵循与 jQuery方法完全相同的 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>

然后你可以hoverIntent()像这样在任何jQuery元素上使用方法

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

element是一个类似or or的jQuery 选择器，是当用户开始悬停元素和停止时将执行的函数。就像旧的优秀jQuery hover一样。'#id''.class''div > .something'whatToDoWhenHoverwhatToDoWhenOut

例子

Answer 2

如果您希望在不依赖 jQuery 的情况下使用 hoverIntent 功能，您可以使用它的纯 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);