是否有一种规范的方法可以使用现有的 onmouseover、onmouseout 和某种计时器来设置 JS onHover 事件？或者只是当且仅当用户将鼠标悬停在元素上一定时间时触发任意函数的任何方法。
Javascript onHover 事件
IT技术
javascript
javascript-events
2021-03-02 05:56:29
4个回答
这样的事情怎么样？
<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>
你能澄清你的问题吗？在这种情况下，“ohHover”是什么，它如何对应于悬停时间的延迟？
也就是说，我想你可能想要的是......
var timeout;
element.onmouseover = function(e) {
timeout = setTimeout(function() {
// ...
}, delayTimeMs)
};
element.onmouseout = function(e) {
if(timeout) {
clearTimeout(timeout);
}
};
或addEventListener/attachEvent或您最喜欢的库的事件抽象方法。
如果您使用 JQuery 库，您可以使用 .hover() 事件，它合并 mouseover 和 mouseout 事件并帮助您处理计时和子元素：
$(this).hover(function(){},function(){});
第一个函数是悬停的开始，下一个函数是结束。阅读更多信息：http : //docs.jquery.com/Events/hover
我认为您不需要/想要超时。
onhover（悬停）将被定义为“悬停”某物的时间段。恕我直言
onmouseover = start...
onmouseout = ...end
为了记录，我已经做了一些事情来“伪造”IE6 中的悬停事件。它相当昂贵，最后我放弃了它以支持性能。
其它你可能感兴趣的问题