File Under: JavaScript

JavaScript Event – Dblclick

This code was written based on a template by John Resig. The original can be found at John Resig’s addEvent function website.

The code, and the template, are referred to in Webmonkey’s JavaScript Events reference page. In this example, the onDblClick event fires whenever a mouse button is clicked twice within a time frame determine by the operating system (a double-click). If attached to a specific object (such as the div in the example below), the event only fires if the mouse is double-clicked within the bounds of that object.

The Code

<html>

<head>

<script>

// addEvent function by John Resig:

// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

  if ( obj.attachEvent ) {

    obj['e'+type+fn] = fn;

    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

    obj.attachEvent( 'on'+type, obj[type+fn] );

  } else

    obj.addEventListener( type, fn, false );

}

</script>

</head>

<body>



<!-- HTML for example event goes here -->

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>



<script>

// Script for example event goes here

addEvent(document.getElementById('mydiv'), 'dblclick', function(event) {

	display_short('double-clicked');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}

</script>

</body>

</html>

What it Looks Like