Detailed explanation of js getting mouse position example_javascript skills

The example in this article describes the method of obtaining the mouse position in js. Share it with everyone for your reference, the details are as follows:

Using javascript to obtain the mouse (cursor) position on the current page is used in many situations, such as drag and drop, tooltip, etc. Of course, we still have to face browser compatibility issues here. Different browsers handle these related attributes differently. Here is a detailed introduction to the differences and final solutions when browsers handle these attributes.

Javascript code is as follows:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

Usage:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

The detailed description of the code is as follows:

We must first declare an evnet object. Regardless of movement, click, key press, etc., an evnet will be activated. In Internet Explorer, event is a global variable and will be stored in window.event. In firefox or other browsers, the event will be obtained by the corresponding function. When we assign the mouseMove function to document.onmousemove, mouseMove will get the mouse movement event.

In order for ev to obtain the event event in all browsers, "||window.event" will not work under Firefox because ev already has a value assigned. In MSIE ev is empty, so you get window.event .

Because we need to obtain the mouse position multiple times in this article, we designed a mousePosition function, which contains one parameter: event.

Because we are going to run under MSIE and other browsers, Firefox and other browsers use event.pageX and event.pageY to represent the position of the mouse relative to the document. If you have a 500*500 window and your mouse is in Absolutely in the middle, then the values ​​of pageX and pageY are both 250, and if you scroll down 500, then pageY will become 750.

MSIE is just the opposite. It uses event.clientX and event.clientY to indicate that the mouse is equivalent to the position of the window, not the document. In the same example, if you scroll down 500, clientY is still 250, so we need to add scrollLeft and scrollTop properties relative to the document. Finally, documents in MSIE do not start at 0,0, but usually have a small border (usually 2 pixels). The size of the border is defined in document.body.clientLeft and clientTop. We also add these.

Complete code:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

I hope this article will be helpful to everyone in JavaScript programming.