Javascript onHover事件

是否有規範的方式來建立一個JS onHover事件與現有的onmouseover，onmouseout和某種類型的定時器？或者只有當用戶在元素上懸停了一段時間時，才觸發任意函數。Javascript onHover事件

2008-11-04 tmtest

你能澄清你的問題嗎？在這種情況下，「ohHover」是什麼，它是如何對應於懸停時間的延遲？

這麼說，我覺得你可能想要的是......

var timeout; 
element.onmouseover = function(e) { 
    timeout = setTimeout(function() { 
     // ... 
    }, delayTimeMs) 
}; 
element.onmouseout = function(e) { 
    if(timeout) { 
     clearTimeout(timeout); 
    } 
};

或者addEventListener/attachEvent或您喜愛的圖書館的活動的抽象方法。

來源

2008-11-04 18:02:43 eyelidlessness

我不認爲你需要/想要超時。

onhover（懸停）將被定義爲「over」某事的時間段。恕我直言

onmouseover = start... 

onmouseout = ...end

爲了記錄我已經做了一些與「假」IE6懸停事件的東西。這是相當昂貴的，最後我放棄了它的表現。

來源

2008-11-04 19:23:21 scunliffe

我希望超時是爲了防止在用戶簡單地將鼠標移到元素上時發生的事件（例如偶然或移動到界面的其他部分，想象一下，如果單擊打開的菜單也懸停打開，但沒有延遲;然後，用戶可能會遇到菜單，在用戶正試圖將鼠標移過頁面時立即打開其他菜單。 – 2010-12-05 21:42:27

@IIsi 50MHz - 這很可能，尤其是如果onmouseout清除計時器類似於@Peter Bailey的回答，在我回答的時候，我一直在想OP可能會對鼠標懸停/跳出/進入/離開事件的方式感到困惑並試圖製作複方手套：http：//thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx – scunliffe 2010-12-06 11:46:53

這樣的事情呢？

<html> 
<head> 
<script type="text/javascript"> 

var HoverListener = { 
    addElem: function(elem, callback, delay) 
    { 
    if (delay === undefined) 
    { 
     delay = 1000; 
    } 

    var hoverTimer; 

    addEvent(elem, 'mouseover', function() 
    { 
     hoverTimer = setTimeout(callback, delay); 
    }); 

    addEvent(elem, 'mouseout', function() 
    { 
     clearTimeout(hoverTimer); 
    }); 
    } 
} 

function tester() 
{ 
    alert('hi'); 
} 

// Generic event abstractor 
function addEvent(obj, evt, fn) 
{ 
    if ('undefined' != typeof obj.addEventListener) 
    { 
    obj.addEventListener(evt, fn, false); 
    } 
    else if ('undefined' != typeof obj.attachEvent) 
    { 
    obj.attachEvent("on" + evt, fn); 
    } 
} 

addEvent(window, 'load', function() 
{ 
    HoverListener.addElem(
     document.getElementById('test') 
    , tester 
); 
    HoverListener.addElem(
     document.getElementById('test2') 
    , function() 
     { 
     alert('Hello World!'); 
     } 
    , 2300 
); 
}); 

</script> 
</head> 
<body> 
<div id="test">Will alert "hi" on hover after one second</div> 
<div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div> 
</body> 
</html>

來源

2008-11-04 19:50:39

如果你使用jQuery庫，你可以使用它融合了鼠標懸停和mouseout事件，並幫助你的時間和子元素的.hover（）事件：

$(this).hover(function(){},function(){});

第一個功能是懸停的開始和下一個是結束。更多詳情，請參閱： http://docs.jquery.com/Events/hover

來源

2009-06-04 16:29:57 MikeN

Javascript onHover事件

回答

相關問題