My Little Scripts - mouse-events.html

Scripts.com - Get the best scripts NOW!
HotScripts.com - Over 10 web rings.
more links...

Index News Samples Downloads E-Mail me Forum Sign Up

MOUSE-EVENTS.HTML

Mouse-events.html is a template for handling three basic mouse events: Moving, pressing down on a button, and releasing the button. It works in IE 5+ and should also work in NS 6+.

When used in conjunction with DHTML, this can be used to create drag and drop web applications. The three handlers return a true value, changing it to false causes some default browser behaviours, like text highlighting, to become disabled.

<html>
<head>
<title>mouse events</title>

<script type="text/javascript">
function init()
         {
         document.onmousedown = mouseDown;
         document.onmousemove = mouseMove;
         document.onmouseup = mouseUp;
         if(navigator.appName == 'Netscape')
            document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
         }

function mouseMove(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if(navigator.appName == 'Netscape' && e.target!=document)
            routeEvent(e);

         document.events.mouseMove_x.value = x;
         document.events.mouseMove_y.value = y;

         return(true);
         }

function mouseDown(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if(navigator.appName == 'Netscape' && e.target!=document)
            routeEvent(e);

         document.events.mouseDown_x.value = x;
         document.events.mouseDown_y.value = y;

         return(true);
         }

function mouseUp(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if(navigator.appName == 'Netscape' && e.target!=document)
            routeEvent(e);

         document.events.mouseUp_x.value = x;
         document.events.mouseUp_y.value = y;

         return(true);
         }
</script>
</head>

<body onload="init();">
<form name="events">
<table>
<tr>
<td><b>mouseMove</b></td>
<td>x:</td>
<td><input type="text" size="3" readonly name="mouseMove_x" /></td>
<td>y:</td>
<td><input type="text" size="3" readonly name="mouseMove_y" /></td>
</tr>

<tr>
<td><b>mouseDown</b></td>
<td>x:</td>
<td><input type="text" size="3" readonly name="mouseDown_x" /></td>
<td>y:</td>
<td><input type="text" size="3" readonly name="mouseDown_y" /></td>
</tr>

<tr>
<td><b>mouseUp</b></td>
<td>x:</td>
<td><input type="text" size="3" readonly name="mouseUp_x" /></td>
<td>y:</td>
<td><input type="text" size="3" readonly name="mouseUp_y" /></td>
</tr>
</table>
</form>
</body>
</html>