JS Get Mouse Coordinate Position Example Analysis_Javascript Skills-JS Tutorial-php.cn

JS Get Mouse Coordinate Position Example Analysis_Javascript Skills

WBOY

Release： 2016-05-16 15:19:02

Original

1222 people have browsed it

This article analyzes the method of obtaining the mouse coordinate position using JS. Share it with everyone for your reference, the details are as follows:

The coordinate positions of the mouse are as follows: the coordinate position of the mouse in the viewport (clientX, clientY), the coordinate position of the mouse on the page (pageX, pageY), the coordinate position of the mouse on the screen (screenX, screenY), where the mouse is in The coordinate position of the viewport (clientX, clientY) and the coordinate position of the mouse on the screen (screenX, screenY) are supported in all browsers, but the coordinate position of the mouse on the page (pageX, pageY) is supported in IE8 and earlier versions. It is not supported, but it doesn't matter. The values of pageX and pageY can be calculated through scrollLeft and scrollTop.

The first is the cross-browser event object

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener)
    {
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent)
    {
      elem.attachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener)
    {
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent)
    {
      elem.detachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event&#63;event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

Copy after login

1. Viewport coordinate position

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Client coordinages: "+event.clientX+","+event.clientY);
});

Copy after login

2.Screen coordinate position

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Screen coordinates: "+event.screenX+","+event.screenY);
});

Copy after login

3. Page coordinate location

var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
   event = EventUtil.getEvent(event);
   var pageX = event.pageX;
   var pageY = event.pageY;
   if(pageX==undefined)
  {
     pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
  }
   if(pageY==undefined)
   {
     pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
   }
   alert("Page coordinates: "+pageX+","+pageY);
});

Copy after login

Readers who are interested in more content related to JavaScript mouse operation can check out the special topic of this site: " Summary of JavaScript mouse operation skills"

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