File Under: JavaScript

JavaScript Event – Mouseup

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 onMouseup event fires whenever a mouse button is released. If attached to a specific object (such as the div in the example below), the event only fires if the mouse is released within the bounds of that object.

The original mousedown event does not need to take place within the target object, making mousedown and mouseup a good pair for implementing drag-and-drop interfaces.

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'), 'mouseup', function(event) {

	display_short('mouseup');

});

function display_short(str)

{

	clearTimeout();

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

	if (str != '')

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

}

</script>

</body>

</html>

What it Looks Like