如何在没有jquery的情况下实现悬浮意图？

Question

我不想在我的所有页面中都包含jquery，但我在一个部分的悬停上添加了一个全局的‘下拉’菜单，但我不希望它立即出现，因为当它只是移动鼠标时会很烦人。通常我会使用jquery和hoverintent来做这件事，但这次不会。

我想我可以在onmouseover上为这个区域设置一个超时，但不确定它是否就这么简单(比如，当鼠标移动时，它不是会像成千上万次一样触发吗？)

当前代码是这样的.

<div onMouseOver="showCart();">Hover here!</div>

那么，将其更改为此操作是否可行？：

<div onMouseOver="setTimeout(showCart, 50);">Hover here!</div>

Answer 1

这里有一个非常简单的Vanilla DOM方法。这需要一个id为target的元素(用于菜单项)和一个id为'dropdown‘的元素。

注意，这使用了全局老式的'on‘处理程序，这可能不是最佳实践(您应该使用addEventListener)，但是，我认为这会使代码更具可读性:)

我还设置了一个jsFiddle here

var target = document.getElementById('target');
var dropdown = document.getElementById('dropdown');
var curEl;

document.onmousemove = function(e) {
    e = e || window.event;
    curEl = e.target || e.srcElement;
}

target.onmouseover = function(e) {
    setTimeout(function() {
        if (curEl === target || curEl === dropdown) {
            dropdown.style.display = "block";
        } else {
            dropdown.style.display = "none";
        }
    }, 300);
}

target.onmouseout = dropdown.onmouseout = function() {
    setTimeout(function() {
        if (curEl !== target && curEl !== dropdown) {
            dropdown.style.display = "none";
        }
    }, 300);
}

Answer 2

嗯，我最初的尝试失败得很糟糕，但后来它就像这样工作了……

<div onmouseover="window.mycarthoverin = 1; setTimeout(showCart, 100);" onmouseout="window.mycarthoverin = 0;">Hover here!</div>

然后在showCart内部..。

if (window.mycarthoverin == 1) {
  ...
}

有没有人看到了我可能没有意识到的这种方法的问题？