2

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

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

目前的代码是这样的......

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

那么将其更改为这项工作吗？：

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

2 回答 2

2

这是一个非常简单的 Vanilla DOM 方法。这需要一个具有 id 的元素target（用于菜单项）和一个具有 id 'dropdown' 的元素。

请注意，这使用全局旧式“on”处理程序，这可能不是最佳实践（您应该使用addEventListener），但是，我认为这使代码更具可读性:)

我还在这里设置了一个 jsFiddle

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);
}
于 2012-07-05T17:48:36.673 回答
0

好吧，我最初的尝试惨遭失败，但后来让它像这样工作......

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

然后里面showCart...

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

有人看到我可能不知道的这种方法有问题吗？

于 2012-07-05T17:28:08.663 回答