Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

JavaScript Mouse Events: onmouseenter, onmousemove, onmousedown, onmouseup, onmouseout Code Example

By Stephen Bucaro

When you move your mouse pointer in to the box shown above, the box's background changes from light gray to light blue in color. When you move your mouse pointer out of the box, the box's background changes from light blue to light gray in color.

In addition, if while your mouse pointer is inside the box you press and hold your left mouse button, the coordinates of your mouse pointer relative to the box will be displayed in the box. When you release your left mouse button, the coordinates of your mouse pointer will no longer be displayed.

Shown below is the html code for the box, which is an html div element.

<div id="mh"
style="width:200px; height:100px; border:1px solid black; background:lightgray;"
onmouseenter = "colorBlue()";
onmousemove = "showCords(event)"
onmousedown = "setdisOn()"
onmouseup = "setdisOff()"
onmouseout = "colorGray()">
</div>

When the mouse pointer moves inside the div, the onmouseenter event calls the function colorBlue(). When the mouse pointer moves inside the div, the onmouseout event calls the function colorGray(). The code for these functions is shown below.

function colorBlue()
{
 document.getElementById("mh").style.background="lightblue";
}

function colorGray()
{
 document.getElementById("mh").style.background="lightgray";
 document.getElementById("mh").innerHTML = "";
}

Note that you could use the onmouseover event rather than the onmouseenter event, as it performs exactly the same event. You could use the onmouseleave event rather than the onmouseout event, as it performs exactly the same event.

If while the mouse pointer is inside the box you press the left mouse button, the onmousedown event calls the setdisOn() function. If while the mouse pointer is inside the box you release the left mouse button, the onmouseup event calls the setdisOff() function. The code for these functions is shown below.

function setdisOn()
{
  disOn = 1;
}

function setdisOff()
{
  disOn = 0;
  document.getElementById("mh").innerHTML = "";
}

The setdisOn() function sets a global flag named disOn. The setdisOff() function clears that flag. When you move the mouse pointer while inside the div, the onmousemove event calls the showCords function, passing it the event object.

The showCords function checks the disOn flag to see if it should display the mouse pointer coordinates. If the disOn flag is set, it gets the clientX and clientY values of the mouse event and uses the documents getElementById(id).innerHTML method to display them inside the div. Shown below is the code for the showCords function.

var disOn = 0;

function showCords(e)
{
   if(disOn)
   {
       var x = e.clientX;
       var y = e.clientY;
       var coords = "x=" + x + " y=" + y;
       document.getElementById("mh").innerHTML = coords;
   }
}