Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to get the position of the pointer by javascript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to get the position of the pointer by javascript".

Javascript gets the position of the pointer by using the pageX and pageY of the event object, or the clientX and clientY properties, together with the scrollLeft and scrollTop properties, so that the position of the pointer can be calculated.

This article operating environment: windows10 system, javascript 1.8.5, thinkpad T480 computer.

To get the position of the pointer in the page, you can use the pageX and pageY of the event object, or the clientX and clientY (compatible IE) properties, along with the scrollLeft and scrollTop properties, so that you can calculate the position of the mouse pointer in the page.

/ / get the page position of the mouse pointer / / Parameter: e indicates the current event object / / return value: returns the coordinates of the mouse relative to the page. The object format (xmemy) function getMP (e) {var e = e | | window.event Return {x: e.pageX | | e.clientX + (document.documentElement.scrollLeft | | document.body.scrollLeft), y: e.pageY | | e.clientY + (document.documentElement.scrollTop | | document.body.scrollTop)}}

The pageX and pageY event properties are not supported by IE browsers, and the clientX and clientY event properties are not supported by Safari browsers, so you can mix them to be compatible with different browsers. For weird mode, the body element represents the page area, while the html element is hidden, but in the standard mode, the html element represents the page area, while the body element is only a separate page element, so you need to be compatible with both parsing methods.

The following example shows how to call the above extension function getMP () to capture the position of the current mouse pointer in the document.

Var t = document.getElementById ("t"); _ document.onmousemove = function (e) {var m = getMP (e); t.value = "mouseX =" + m.x + "\ n" + "mouseY =" + m.y}

The demonstration effect is as follows:

Get the relative position of the pointer

Use offsetX and offsetY or layerX and layerY to get the offset of the mouse pointer relative to the containment box. If you use the offsetLeft and offsetTop attributes to get the offset coordinates of the element in the positioning inclusion box, then use the layerx property value minus the offsetLeft property value, and use the layery property value minus the offsetTop property value, you get the position of the mouse pointer inside the element.

/ / get the position of the mouse pointer within the element / / Parameter: e represents the current event object, o represents the current element / / return value: returns the relative coordinate object function getME (e, o) {var e = e | | window.event; return {x: e.offsetX | | (e.layerX-o.offsetLeft), y: e.offsetY | | (e.layerY-o.offsetTop)}}

In practice, the above function has the following two problems:

The Mozilla type and Safari browser take the upper-left corner of the outer wall of the element border as the reference point.

Other browsers take the upper-left corner of the inner wall of the element border as the coordinate origin.

Considering the influence of the border on the mouse position, when the element border is very wide, you must consider how to eliminate the influence of the border on the mouse position. However, due to the different border styles, it has a default width of 3 pixels, which makes it troublesome to get the actual width of the border of the element. More conditions need to be set to determine the border width of the current element.

Example

The improved extension function for obtaining the position of the mouse pointer within the element is as follows:

/ / perfect the position of the mouse pointer within the element / / Parameter: e represents the current event object, o represents the current element / / return value: returns the coordinate position of the mouse relative to the element, where x represents the x-axis offset distance, y represents the y-axis offset distance function getME (e, o) {var e = e | | window.event / / get the width of the left border of the element / / call the getStyle () extension function to get the border style value, and try to convert it to a numeric value, and assign it if the conversion is successful. / / otherwise, determine whether a border style is defined. If a border style is defined and the value is not none, the border width is the default value, that is, 3 pixels. / / if no border style is defined and the width value is auto, the border width is 0 var bl = parseInt (getStyle (o, "borderLeftWidth")) | | ((o.style.borderLeftStyle & & o.style.borderLeftStyle! = "none")? 3: 0) / / get the width of the top border of the element. The design idea is the same as the method of getting the left border var bt = parseInt (getStyle (o, "borderTopWidth")) | ((o.style.borderTopStyle & & o.style.borderTopStyle! = "none")? 3: 0); var x = e.offsetX | | (e.layerX-o.offsetLeft-bl) / / Mouse offset values in general browsers / / compatible with Mozilla browsers, minus border width var y = e.offsetY | | (e.layerY-o.offsetTop-bt); / / mouse offset values in general browsers / / compatible with Mozilla browsers, minus border width var u = navigator.userAgent / / get the user data of the browser if ((u.indexOf ("KHTML") >-1) | | (u.indexOf ("Konqueror") >-1) | | (u.indexOf ("AppleWebKit") >-1) {/ / if it is a Safari browser, subtract the influence of the border x-= bl; y-= bt } return {/ / returns mouse position objects compatible with different browsers, taking the upper-left corner of the inner wall of the element border as the positioning origin x: X, y: y}}

The demonstration effect is as follows:

Thank you for reading, the above is the content of "how to get the position of the pointer by javascript". After the study of this article, I believe you have a deeper understanding of how to obtain the position of the pointer by javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.