Mouse and DIV, HTML events
The recognition in JavaScript of mouse movements within a layer.
On this 300 x 400 pixels layer we'll see how to know the position of the mouse. You can move the mouse over the layer and click inside.
To know the position of the mouse, we use this code:
var xMousePos = 0;
var yMousePos = 0;
document.onmousemove = function(e)
{
xMousePos = e.clientX + window.pageXOffset;
yMousePos = e.clientY + window.pageYOffset;
};We see that the event handler is associated with the whole document. We could associate it to the layer alone, but according to my experience in production, the result is less effective.
To know the position of the mouse inside the layer we have to deduct the top margin and the left margin of the layer relative to the document. What is done with the following code, assuming that the object representing the div is named mydiv:
var x = xMousePos - mydiv.offsetLeft;
var y = yMousePos - mydiv.offsetTop; From there you can see the position of the mouse when it is over the layer with the onmousemove event handler:
mydiv.onmousemove = function()
{
var x = xMousePos - mydiv.offsetLeft;
var y = yMousePos - mydiv.offsetTop;
mydiv.style.cursor='wait';
if(x > mydiv.offsetWidth - 4)
mydiv.style.cursor='e-resize';
if(y > mydiv.offsetHeight - 4)
mydiv.style.cursor='n-resize';
document.getElementById("message").innerHTML = "Pos x = " + x + "/" +
mydiv.offsetWidth + " y = " + y +
"/" +mydiv.offsetHeight;
}This function also changes the mouse cursor when it passes over the edge of the layer, or when it is inside.
We see that the width and height are 408/308 pixels instead of 400/300 as specified in the style sheet, that comes from the browser has added the border. You can avoid this value added with the box-sizing property for the div:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;The position of the mouse in the layer will not be 0 in the upper left corner if the style sheet of your page contains tags with position: absolute, which is the case at the origin of this page for the content tag. For the demonstration, I had to override the CSS of this page to replace the absolute position value by a static value and top and left by margins (actually top and left are ignored with a static position):
#content
{
position:static;
margin-left:220px;
margin-top:84px;
} This has the same effect for the layout of the page.
You can also display the position of the mouse when the user clicks inside the layer.
function update(e)
{
var x = xMousePos - mydiv.offsetLeft;
var y = yMousePos - mydiv.offsetTop;
alert("x=" + x + " y=" + y);
}
mydiv.onclick = update;Here I use a separate function for the demonstration. We could use a lambda function as we did for onmousemove.
Here finally is the complete code of the demo:
<script>
var mydiv = document.getElementById("mydiv");
var xMousePos = 0;
var yMousePos = 0;
document.onmousemove = function(e)
{
xMousePos = e.clientX + window.pageXOffset;
yMousePos = e.clientY + window.pageYOffset;
};
function update(e)
{
var x = xMousePos - mydiv.offsetLeft;
var y = yMousePos - mydiv.offsetTop;
alert("x=" + x + " y=" + y);
}
mydiv.onclick = update;
mydiv.onmousemove = function()
{
var x = xMousePos - mydiv.offsetLeft;
var y = yMousePos - mydiv.offsetTop;
mydiv.style.cursor='wait';
if(x > mydiv.offsetWidth - 4)
mydiv.style.cursor='e-resize';
if(y > mydiv.offsetHeight - 4)
mydiv.style.cursor='n-resize';
document.getElementById("message").innerHTML = "Pos x = " + x + "/" +
mydiv.offsetWidth + " y = " + y +
"/" +mydiv.offsetHeight;
}
</script> We thus have all the elements necessary to use the mouse in relation to a div, or any other elements because these properties apply to most HTML tags (with the notable exception of iframes).
To go further with the mouse, new features will surely be needed which are already available in frameworks. For example, if you want to resize the layer with the mouse it is better to use one of the most popular frameworks and the jQuery resizable plugin specialized for resizing a layer.