如何做到沒有jQuery的hoverintent？

我不想在所有頁面中包含jquery，但是我在一個部分的懸停上添加了一個全局的「彈出式」菜單，但是我不想讓它立即生效，因爲它只是移動鼠標時很煩人。通常我會用jquery和hoverintent來做到這一點，但這次不行。如何做到沒有jQuery的hoverintent？

我想我可以爲區域設置超時上onmouseover，但不知道它就是這麼簡單（比如，是不是很火象千百次，而鼠標移動？）

當前的代碼像這樣...

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

這樣會改變的是對這個工作？：

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

來源

2012-07-05 Rodolfo

好，試試吧:) – lbstr 2012-07-05 16:20:04

一個提示：你必須明確的是，如果超時鼠標是不是仍然在'div'。 – lbstr 2012-07-05 16:21:17

以及我一直擔心的事情在一個瀏覽器中工作，而不是另一個，所以也許別人知道更好 – Rodolfo 2012-07-05 16:21:18

下面是一個非常簡單的Vanilla DOM方法。這需要一個ID爲target（用於菜單項）的元素和一個ID爲「下拉」的元素。

注意，這裏使用「開」處理全球舊式，這可能不是一個最佳實踐（你應該使用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); 
}

來源

2012-07-05 17:48:36 Husky

看起來很有趣，但嘗試過IE中的jsFiddle和似乎沒有工作（FF是好的） – Rodolfo 2012-07-05 18:15:17

我已經更新了示例，使其在IE上工作。新的jsFiddle在這裏：http://jsfiddle.net/Nt8Pq/1/ – Husky 2012-07-05 18:33:09

它現在在IE中的作品，謝謝。準備把這個放在我的JavaScript庫中，但我注意到它可能與jsFiddle中的某些東西有關......如果從上面到下面快速地將鼠標移動到它下面，它可以正常工作，但是如果從下面快速地運行鼠標到上面（結束於CSS區域）它仍然彈出 – Rodolfo 2012-07-05 18:42:03

好，我最初的嘗試遭到慘敗，但隨後使它像這樣的工作。 ..

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

然後裏面showCart ...

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

任何人看到這種方法我可能不知道的問題？

來源

2012-07-05 17:28:08 Rodolfo

如何做到沒有jQuery的hoverintent？

回答

相關問題