total mouse control in javascript

Javascript Tutorials

Tutorial

Click on thumbnailed images to enlarge

The code example below shows you how you can include better mouse control over your web pages, even the right-click mouse event.

The example below basically shows you a page with 2 boxes on it. These boxes are called 'Drag Me 1' and 'Drag Me 2'. Using your mouse, you will be able to drag these boxes on your screen. You can use either mouse button to start the drag event.

On top of the screen, you will see your current mouse position (x, y coordinates) and which was the last mouse button that was pressed down or up (ie right down).
There is also a button that you can click, and it will pop-up a new window that shows you the innerHTML of the body. This way you can see how the page contents are affected by your mouse actions.

The first step on hooking your own event handlers to your mouse actions is to disable the context menu, which pops-up when you click your right mouse button.

Then you define your new event handler functions for the next 3 events:
- mouse up
- mouse down
- mouse move

Next, you hook up the new handlers to your window using the next lines:
window.document.onmousedown = mouseDown;
window.document.onmouseup = mouseUp;
window.document.onmousemove = getMouseXYPos;

And finally, to enable the dragging functionality of the boxes, you will also need to hook up the mousedown and mouseup events to each of the boxes individually:
<div onmousedown="dragPiece(this);" onmouseup="drop();">Drag Me 1</div>

Enough theory; here's the code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Mouse control example</title>
<style type="text/css">
.body {
background-color:#ffffff;
color:#000000;
margin:0;
overflow-y:scroll;
}

.tagnormal {
background-color:#aabbcc;
font-size:12px;
font-weight:normal;
color:#ffff66;
width:100px;
margin:2px;
padding:2px;
border-color:#000000;
border-style:solid;
border-width:1px;
}

.tagdrag {
background-color:#aabbcc;
font-size:12px;
font-weight:normal;
color:#ffff66;
width:100px;
margin:2px;
padding:2px;
border-color:#000000;
border-style:solid;
border-width:1px;
border-bottom-width:2px;
border-right-width:2px;
}
</style>
<script type="text/javascript">
// <![CDATA[
document.oncontextmenu = new Function("return false");

// Temporary variables to hold mouse x-y pos.
var iMousePosX = 0;
var iMousePosY = 0;

var iOrigObjTop;
var iOrigObjLeft;

var iDragObjTopDiff;
var iDragObjLeftDiff;

var rightclick = false;
var oDragObj = null;

// Start dragging
function dragPiece(sourceObject) {
// Change object style.
sourceObject.className = "tagdrag";

// Remember original object position.
iOrigObjTop = parseInt(sourceObject.style.top);
iOrigObjLeft = parseInt(sourceObject.style.left);

iDragObjTopDiff = iMousePosY - iOrigObjTop;
iDragObjLeftDiff = iMousePosX - iOrigObjLeft;

oDragObj = sourceObject;
}

// Stop dragging
function drop() {
oDragObj.className = "tagnormal";
oDragObj = null;
}


// Handle mouse key down.
function mouseDown(e) {
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);

if (rightclick) {
document.getElementById("mousestat").innerHTML = "right down";
bMouseRightKeyDown = true;
} else {
document.getElementById("mousestat").innerHTML = "left down";
bMouseLeftKeyDown = true;
}
return false;
}

// Handle mouse key up.
function mouseUp(e) {
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);

if (rightclick) {
document.getElementById("mousestat").innerHTML = "right up";
bMouseRightKeyDown = false;
} else {
document.getElementById("mousestat").innerHTML = "left up";
bMouseLeftKeyDown = false;
}
return false;
}

// Process mouse movement.
function getMouseXY(posX, posY) {
iMousePosX = posX;
iMousePosY = posY;

document.getElementById("mousepos").innerHTML = iMousePosX + ", " + iMousePosY;

// Move object, if dragging.
if (oDragObj != null) {
oDragObj.style.top = (iMousePosY - iDragObjTopDiff) + "px";
oDragObj.style.left = (iMousePosX - iDragObjLeftDiff) + "px";
}
}

// Mouse movement event handler
function getMouseXYPos(e) {
if (!e) var e = window.event;
getMouseXY(e.clientX + document.body.scrollLeft,
e.clientY + document.body.scrollTop);
return true;
}

function showSource() {
var popup = window.open('', '');
popup.document.writeln("<html><head><title>source</title></head><body><xmp>");
popup.document.writeln(document.getElementById("canvas").innerHTML);
popup.document.writeln("</xmp></body></html>");
popup.document.close();
}

// Attach new event handlers.
window.document.onmousedown = mouseDown;
window.document.onmouseup = mouseUp;
window.document.onmousemove = getMouseXYPos;
// ]]>
</script>
</head>

<body id="canvas" class="body">

<div>
<span>Mouse position: </span><span id="mousepos"></span><br />
<span>Last Button Status: </span><span id="mousestat"></span><br />
<span id="showsrc" class="tagnormal" onclick="showSource();">Click here to show body.innerHTML</span>
</div>

<div id="lbl1"
style="position:absolute;left:10px;top:140px"
class="tagnormal"
onmousedown="dragPiece(this);"
onmouseup="drop();">Drag Me 1</div>

<div id="lbl2"
style="position:absolute;left:10px;top:180px"
class="tagnormal"
onmousedown="dragPiece(this);"
onmouseup="drop();">Drag Me 2</div>

</body>

</html>


Tutorial also available at this [link].

Tutorial Comments

Showing latest 3 of 3 comments

To the Author, can you please contact me as I would like to talk about test results. alejandrorivera at ups dot com.

By Corky37 on Apr 13, 2009 11:47 am

If you are the author of this code, I'd like to discuss some test results with you. MartinRinehart at gmail dot com.

By MartinRinehart on Jan 21, 2009 8:43 am

You will not recognize the brilliance of this code unless you've first tried to do it yourself. Superb work!

By MartinRinehart on Jan 21, 2009 8:30 am

Tutorial Details

Author kaerts View profile
Submitted on Feb 11, 2006
Page views 38,787
Favorites 0
Comments 3

Tutorial Tags