Javascript onHover 事件

标签 javascript javascript-events

是否有一种规范的方法可以使用现有的 onmouseover、onmouseout 和某种计时器来设置 JS onHover 事件?或者当且仅当用户将鼠标悬停在元素上一定时间时才触发任意函数的任何方法。

最佳答案

这样的事情怎么样?

<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>

关于Javascript onHover 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/262740/

相关文章:

JavaScript 显示警报消息

javascript - AmCharts 默认轴值

javascript - 使用 Javascript 从复选框传递值

javascript - attachEvent/addEventListener 到 Window onload/load - 首选方式

javascript - 捕获事件和冒泡事件之间的区别

javascript 模糊事件——有什么方法可以检测哪个元素现在有焦点吗?

javascript - Bootstrap 轮播位置

javascript - 按回车键时如何触发onclick功能?

javascript - 如何使用 JavaScript 将 'this' 传递给函数

javascript - 在 Javascript 中刷新 $(document).ready