Delay Execution of an onMouseOver Function

A HunBug Document
Document No.: 11570
Last Updated: 01 May 2009
Author: HunBug

Often the onMouseOver trigger function can produce an annoying user experience by reacting too quickly for the user. This article explains how to use the setTimeout Javascript function to delay the execution of the onMouseOver trigger function, so the user has to hover over an item for a couple of seconds before functionality executes. 

Test Page

This test page contains three coloured blocks. When the mouse hovers over one of these coloured blocks for two seconds, the colour of the block is displayed at the bottom of the page. 

<html>

  <head>

    <style type="text/css">
      .testblock {
          height: 100px;
          width: 100px;
          margin: 25px;
      }
    </style>

    <script type="text/javascript">

      var ie = document.all;
      var timeoutId;
      var timeoutObj;

      document.onmouseover = function(e) {
        var obj = ie ? event.srcElement : e.target;
        if (obj.className=='testblock') {
          timeoutObj = obj;
          timeoutId = setTimeout("delay()", 2000);
        }
      }
      
      document.onmouseout = function(e) {
        var obj = ie ? event.srcElement : e.target;
        if ((obj.className=='testblock') && timeoutId )
          clearTimeout(timeoutId);
      }

      function delay() {
        document.getElementById('output').innerHTML = timeoutObj.style.backgroundColor;
      }

    </script>

  </head>

  <body>
 
    <h1>Mouse Over setTimeout Test</h1>
    <p>Hover over coloured squares for two seconds for delay function to fire.</p>

    <div id="tb1" class="testblock" style="background:red"></div>
    <div id="tb2" class="testblock" style="background:green"></div>
    <div id="tb3" class="testblock" style="background:blue"></div>
    
    <hr/>
    <h1><span id="output"></span>&nbsp;</h1>
    <hr/>
    
  </body>

</html>

How it Works

The code is pretty straightforward, but in case of any ambiguity.

There are two document leave mouse functions, onmouseover and onmouseout.

When onmouseover fires, the function checks to see if the object has a class of "testblock", IE one of the coloured blocks. If it has setTimeout is used to call the delay function after 2000 milliseconds.

If onmouseout fires, it also checks to see if the object is of "testblock", if it is clearTimeout is used to cancel the call to the delay function.

So if onmouseover fires and onmouseout doesn't, within 2 seconds, the delay function fires and writes the colour of the block to the output element.

Delay Period

The setTimeout function works in milliseconds, so to change the timeout period, simply change the second parameter in the setTimeout call.

timeoutId = setTimeout("delay()", 2000);

Internet Explorer

As always Internet Explorer has to be awkward. To get the object that triggered the onmouseover or onmouseout events, we need to use event.srcElement for Internet Explorer and e.target for other browsers. To do this we check for the browser type by seeing if document.all returns true. If it does then we know we need to use event.srcElement in the event functions.

var ie = document.all;
...
document.onmouseover = function(e) {
  var obj = ie ? event.srcElement : e.target;
Otherwise we use e.target.

Example


 


Further Reading

...

HunBug Store








Comments are all individually read, none are automatically posted to the site.