A variety of ways to get the mouse position based on JavaScript _javascript tips

Source: Internet
Author: User

In some DOM operations we often deal with the location of elements, mouse interactive a frequently used aspect, it is disappointing that different browsers will have different results or even some browsers have no results, this article on the mouse click position coordinates to get some simple summary, no special statement code in IE8, Test compatibility under Firefox,chrome

Mouse click Position coordinates

Relative to screen

If it is related to the mouse click to determine the location is relatively simple, get to the mouse click event, the event Screenx,screeny get the click Position relative to the screen left margin and the top margin, regardless of the iframe factors, different browsers performance is also consistent.

function Getmousepos (event) {
      var e = Event | | window.event;
      return {' x ': E.screenx, ' y ': ScreenY}
    

Relative browser window

Simple code can be implemented, but this is not enough, because in most cases we want to get the mouse click position relative to the browser window coordinates, the event's Clientx,clienty property indicates the mouse click position relative to the document's left margin, the top margin. So, like, we wrote this code.

function Getmousepos (event) {
      var e = Event | | window.event;
      return {' x ': E.clientx, ' y ': ClientY}
    

Relative document

Simple tests are fine, but Clientx and clienty get the coordinates relative to the current screen, ignoring the page scrolling factor, which is useful in many conditions, but what if we need to consider page scrolling, which is relative to the coordinates of the document (the BODY element)? Plus the rotation of the displacement on it, below we try how to calculate the page scrolling displacement.

In fact, under the Firefox problem will be much simpler, because Firefox support attribute Pagex, and Pagey properties, these two properties have been the page scrolling calculation.

In Chrome, you can calculate the page scrolling displacement by document.body.scrollleft,document.body.scrolltop, while in IE you can pass the Document.documentElement.scrollLeft , Document.documentElement.scrollTop

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 above content is a small part of the introduction of JavaScript based on the location of the mouse to obtain a variety of methods, I hope you like.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.