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

This article mainly introduces "how to get the mouse position by javascript". In the daily operation, I believe many people have doubts about how to obtain the mouse position by javascript. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to get the mouse position by javascript". Next, please follow the editor to study!

JS methods to obtain the mouse position: 1, use clientX and clientY properties; 2, use offsetX and offsetY properties; 3, use pageX and pageY properties; 4, use screenX and screenY properties; 5, use layerX and layerY properties.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

In JavaScript, getting the location of the mouse is an important event when an event occurs. Due to browser incompatibility, different browsers define different properties in their respective event objects, as shown in the following table. These attributes define the coordinates of the mouse pointer in terms of pixel values, but because they refer to different coordinate systems, it is difficult to accurately calculate the position of the mouse.

Property and its compatibility property description compatibility clientX takes the upper left corner of the browser window as the origin, locates all browsers with the upper left corner of the browser window, SafariclientY is incompatible with all browsers with the upper left corner of the browser window, locates all browsers with the upper left corner of the target object of the current event, locates all browsers with the upper left corner of the target object of the current event, and MozillaoffsetY takes the upper left corner of the target object of the current event as the origin. Locate y-axis coordinates of all browsers, incompatible MozillapageX takes the upper-left top corner of the document object (that is, document window) as the origin, locate the x-axis coordinates of all browsers, IEpageY takes the upper-left top corner of the document object (that is, the document window) as the origin, locate y-axis coordinates of all browsers, locate the upper-left top corner of the IEscreenX computer screen as the origin, locate the x-axis coordinates of all browsers screenY computer screen top corner as the origin Positioning y-axis coordinates all browsers layerX's nearest absolute positioning parent element (if not, document object) upper-left corner is the element, positioning x-axis coordinates Mozilla and SafarilayerY the nearest absolute positioning parent element (if not, then document object) is the element, positioning y-axis coordinates Mozilla and Safari

Example 1

The following describes how to use a variety of mouse coordinate properties to achieve a mouse positioning design that is compatible with different browsers.

First, take a look at the screenX and screenY properties. These two properties are supported by all browsers and should be said to be the best choice, but their coordinate system is the computer screen, that is, the upper-left corner of the computer screen as the positioning origin. This is of no value to web pages with browser windows as the active space. Because of the different screen resolution, different browser window size and location, it is very difficult to locate the mouse in the web page.

Secondly, if the document object is used as the coordinate system, you can consider using the pageX and pageY properties to locate in the browser window. This is a good idea for designing mouse followers, because the following elements generally move in the browser window with absolute positioning, passing the pageX and pageY attribute values to the top and left style attributes of the absolute positioning element in the mousemove event handler.

The above properties are not supported by the IE event model, so you need to find an IE-compatible method for this. The clientX and clientY properties take the window object as the coordinate system, and the IE event model supports them, so you can choose them. However, consider the possible scroll bar offsets for objects such as window, so you should also add the offset for page scrolling relative to the window object.

Copy plain text copy var posX = 0, posY = 0 event.pageY; var event = event | | window.event;if (event.pageX | | event.pageY) {posX = event.pageX; posY = event.pageY;} else if (event.clientX | | event.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;} var posX = 0, posY = 0 scape var event = event | | window.event If (event.pageX | | event.pageY) {posX = event.pageX; posY = event.pageY;} else if (event.clientX | | event.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;}

In the above code, you first detect whether the pageX and pageY properties exist, and if so, get their values; if not, detect and get the values of the clientX and clientY properties, and then add the scrollLeft and scrollTop property values of the document.documentElement and document.body objects, so that you get the same coordinate values in different browsers.

Example 2

Encapsulate the mouse positioning code. Design idea: the object can be ordered to follow the soil and water conservation according to the specific object passed and the offset relative to the mouse pointer.

A wrapper function is defined first. The parameters passed in by the design function are the object reference pointer, the offset distance from the mouse pointer, and the event object. Then the encapsulation function can obtain the coordinate value of the mouse according to the event object and set the object to the absolute positioning, and the absolute positioning value is the current coordinate value of the mouse pointer.

The package code is as follows:

Copy plain text copy var pos = function (o, x, y, event) {/ / Mouse positioning assignment function var posX = 0, posY = 0; / / temporary variable value var e = event | | window.event; / / standardized event object if (e.pageX | | e.pageY) {/ / get the current coordinate values of the mouse pointer posX = e.pageX; posY = e.pageY } else if (e.clientX | | e.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;} o.style.position = "absolute"; / / defines the current object as absolute positioning o.style.top = (posY + y) + "px" / set the object's y-axis coordinates o.style.left = (posX + x) + "px" with the y-axis coordinates and incoming offset values of the mouse pointer; / / set the object x-axis coordinates} var pos = function (o, x, y, event) {/ Mouse positioning assignment function var posX = 0, posY = 0; / / temporary variable value var e = event | | window.event / / standardize the event object if (e.pageX | | e.pageY) {/ / get the current coordinate values of the mouse pointer posX = e.pageX; posY = e.pageY;} else if (e.clientX | | e.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop } o.style.position = "absolute"; / / define the current object as absolute positioning o.style.top = (posY + y) + "px"; / / set the object's y-axis coordinates o.style.left = (posX + x) + "px" with the mouse pointer's y-axis coordinates and incoming offset values; / / set the object's x-axis coordinates with the mouse pointer's x-axis coordinates and incoming offset values}

Let's test the encapsulation code. Register the mouse movement event handler for the document object, and pass in the mouse positioning wrapper function, which is an element that sets the distance by which its position is offset to the lower right of the mouse pointer (10 ~ 20). Considering that the DOM event model passes the event object as parameters, don't forget to pass the event object in the calling function.

Copy plain text copy mouse follow var div1 = document.getElementById ("div1"); _ document.onmousemove = function (event) {pos (div1, 10, 20, event);} mouse follow var div1 = document.getElementById ("div1"); _ document.onmousemove = function (event) {pos (div1, 10, 20, event);}

Example 3

Gets the coordinates of the mouse pointer within the element. This can be achieved using the offsetX and offsetY properties, but Mozilla browsers do not support it. You can choose the layerX and layerY properties to be compatible with Mozilla browsers.

The design code is as follows:

Copy plain text copy var event = event | | window.event;if (event.offsetX | | event.offsetY) {/ / for non-Mozilla browsers x = event.offsetX; y = event.offsetY;} else if (event.layerX | | event.layerY) {/ / compatible Mozilla browsers x = event.layerX; y = event.layerY;} var event = event | | window.event If (event.offsetX | | event.offsetY) {/ / for non-Mozilla browsers x = event.offsetX; y = event.offsetY;} else if (event.layerX | | event.layerY) {/ / compatible Mozilla browsers x = event.layerX; y = event.layerY;}

However, the layerX and layerY attributes are based on the absolutely positioned parent element, not the element itself. If there is no absolutely positioned parent element, the document object is used as the reference. To do this, you can design an absolutely positioned parent element around the outer layer of the element by adding it dynamically or manually, which can solve the browser compatibility problem. Taking into account the error caused by the distance between elements, the offset of one or more pixels can be subtracted appropriately.

The complete design code is as follows:

Copy plain text copy mouse follow var t = document.getElementById ("text"); var div1 = document.getElementById ("div1"); div1.onmousemove = function (event) {var event = event | | window.event; / / standardized event object if (event.offsetX | | event.offsetY) {t.value = event.offsetX + "" + event.offsetY } else if (event.layerX | | event.layerY) {t.value = (event.layerX-1) + "" + (event.layerY-1);}} mouse follows var t = document.getElementById ("text"); var div1 = document.getElementById ("div1"); div1.onmousemove = function (event) {var event = event | | window.event / / standardize event object if (event.offsetX | | event.offsetY) {t.value = event.offsetX + "" + event.offsetY;} else if (event.layerX | | event.layerY) {t.value = (event.layerX-1) + "" + (event.layerY-1);}}

This solves the problem of positioning the mouse pointer within the element. However, because an absolutely positioned element is wrapped around the element, it destroys the structural layout of the entire page. On the premise of ensuring that this artificial way will not lead to confusion in the layout of the structure, we can consider choosing this method.

At this point, the study on "how to get the mouse position of javascript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.