Javascript events and properties of mouse coordinates-JS Tutorial-php.cn

Javascript events and properties of mouse coordinates

一个新手

Release： 2017-09-09 10:06:20

Original

1777 people have browsed it

In normal development, you will more or less encounter some requirements related to mouse coordinates. For example: gesture determination on the mobile side, shake and drag window events on the PC side, etc. So do you all know the related Event event properties of Javascript?
For example, when we click on the event, what are the current coordinates that pop up? First of all, we need to understand event.pageX, event.clientX and event.screenX, as well as some browser compatibility issues with their properties;

Before that, we also need to understand the event event Compatibility issues:
1. When we look at the browser's default event behavior, the first thing that comes to mind must be event.preventDefault()
2. If we are preventing the bubbling of events, we will use event.stopPropagation();
3. When we get the target source node of the event, what we think of is event.target;
However, in IE browsers, especially browsers below IE9, the above are compatibility issues. Here we can summarize the EventUtil object to do some cross-browser events;

    var EventUtil = {
     addHandler: function (elment, type, handler) {
         if (element.addEventListener) {
              element.addEventListener(type, handler, false); 
          } else if (element.attachEvent) {
              element.attachEvent(&#39;on&#39; + type, handler) 
          } else {
               element[&#39;on&#39; + type] = handler;
          }
     },
     removeHandler: function(element, type, handler) {
         if (element.removeEventListener) {
               element.removeEventListener(type, handler, false);
          } else if (element.detachEvent) {
               element.detacheEvent(&#39;on&#39; + type, handler); 
          } else {
              element[&#39;on&#39; + type] = null; 
          }
     },
     getEvent: function(event) {
         return event ? 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 = false; 
          }
     },
};

Copy after login

in After the above cross-browser events are processed, it feels like there is nothing related to the title yet;
First: we must first understand the relationship between the three pageX, clientX, and screenX mentioned above;

 1、pageX:是指鼠标的位置相当于web页面的具体坐标；
 2、clientX:是指鼠标的位置相对于浏览器窗口的具体坐标；
 3、screenX:则具体是指鼠标位置相对于系统窗口的具体坐标；

 其中，pageX可能会大于或等于clientX;可以用这个公式来计算：  
     pageX = clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 具体的差别可自行脑补出来啦，哈哈。

Copy after login

The above is the detailed content of Javascript events and properties of mouse coordinates. For more information, please follow other related articles on the PHP Chinese website!