The following article was originally written back in 2006.
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>