Before reading this article, please go through
the following articles:
Introduction
In this article you
will learn about mouse events. There are seven types of mouse events, they are
- Onclick
- Ondblclick
- Onmousedoen
- Onmousemove
- Onmouseover
- Onmouseout
- Onmouseup
I have divided these
mouse events into three parts.
Third part
Today you will learn
about the OnMouseMove, OnMouseDown and OnMouseUp events.
OnMouseMove
The
mousemove
event works fine, but you should be aware that it may take quite some system
time to process all mousemove events. If the user moves the mouse one pixel then
the
mousemove
event fires. Even when nothing actually happens, long and complicated functions
take time and this may affect the usability of the site: everything goes very
slowly, especially on old computers.
Therefore it's best to
register an
onmousemove
event handler only when you need it and to remove it as soon as it's not needed
any more. The following is an example.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
width:
199px;
height:
99px;
border:
1px
solid;
margin:
45px;
}
</style>
<script>
function
myFunction(event) {
x = event.clientX;
y = event.clientY;
coor =
"result: (Yaxis-"
+ x +
"Xaxis-"
+ y +
")";
document.getElementById("demo").innerHTML
= coor
}
function
clearCoor() {
document.getElementById("demo").innerHTML
=
"";
}
</script>
</head>
<body
style="margin:
0px;">
<div
id="coor"
onmousemove="myFunction(event)"
onmouseout="clearCoor()">
<p
id="demo">
</p>
</div>
<p>
Mouse over the rectangle above, and get the coordinates
of your mouse pointer.</p>
</body>
</html>
Output
![cordinet.jpg]()
OnMousedown and
OnMouseup
If the user clicks on
an element no less than three mouse events fire, in this order:
mousedown, when the user depresses the mouse button on this elementmouseup, when the user releases the mouse button on this element
In general
mousedown
and
mouseup
are more useful than
click.
Some browsers don't allow you to read out mouse button information
onclick.
Furthermore, sometimes the user does something with his mouse but no
click
event follows.
Suppose the user
depresses the mouse button on a link, then moves his mouse off the link and then
releases the mouse button. Now the link only registers a
mousedown
event. Similarly, if the user depresses the mouse button, then moves the mouse
over a link and then releases the mouse button, the link only registers a
mouseup.
In neither case does a
click
event fire.
Whether or not this is a
problem depends on the user interaction you want. But you should generally
register your script
onmousedown/up,
unless you're completely sure you want the
click event
and nothing else.
If you use alerts in
handling these events thenb the browser may lose track of which event took place
on which element and how many times it took place, messing up your scripts. So
it's best not to use alerts.
Example
<html>
<head>
<script
type="text/javascript">
function
OnButtonDown(button) {
button.style.color = "red";
}
function OnButtonUp(button) {
button.style.color = "green";
}
</script>
</head>
<body>
<h2>
Click on the following button and see its
text color.</h2>
<br
/>
<button
onmousedown="OnButtonDown
(this)" onmouseup="OnButtonUp
(this)">
Test button</button><br>
<br
/>
<button
id="testButton">
Capture Test</button>
</body>
</html>
Output
![move.jpg]()