How to get the mouse click position in JavaScript? Summary of three methods to obtain

In fact, we have been dealing with elements in DOM. This is also a common aspect of mobile phone interaction. However, many programmers are disappointed. Different results will appear in different browsers. Let’s talk about it below. Let’s take a look at how to use js to get the position of the mouse click, and summarize a detailed tutorial for you.

1: The mouse is relative to the screen

If we involve the location of the mouse click, it is relatively simple, we can get After the mouse clicks, screenX and screenY are used to determine the approximate location of the click, thereby determining the relative position to the top and bottom margins of the screen. We do not consider factors such as iframe, but the performance is still the same in different browsers. of.

Example:

function getMousePos(event) {             
     var e = event || window.event;             
      return {'x':e.screenX,'y':screenY}  
}

2: The mouse is relative to the browser window

If the position is determined through the above simple code, often these are still Not enough, because in general, we need to get the coordinates of the mouse relative to the browser window, and respectively obtain the top margin and left margin of the mouse relative to the window, which can be represented by clientX and clientY.

For example:

function getMousePos(event) {              
     var e = event || window.event;              
     return {'x':e.clientX,'y':clientY} 
}

Three: Mouse relative to the document

We can use clientX and clientY to get the coordinates of the current browser window, but these The conditions are all limited. When the page appears scrolling, what should I do with the coordinates relative to the document? At this time, we only need to add the scrolling displacement.

For example:

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}

The current problem with Firefox browser will be much simpler, because Firefox supports the two attributes of pageX and pageY, and has already taken page scrolling into account.

The above is how to get the position of mouse click in JavaScript? Get a complete introduction to the three methods. If you want to know more about JavaScript Video Tutorial, please pay attention to the php Chinese website.

The above is the detailed content of How to get the mouse click position in JavaScript? Summary of three methods to obtain. For more information, please follow other related articles on the PHP Chinese website!