Événements Javascript et propriétés des coordonnées de la souris-js tutoriel-php.cn

Événements Javascript et propriétés des coordonnées de la souris

一个新手

Libérer： 2017-09-09 10:06:20

original

1775 Les gens l'ont consulté

Dans un développement normal, vous rencontrerez plus ou moins certaines exigences liées aux coordonnées de la souris. Par exemple : détermination de gestes côté mobile, événements de fenêtre de tremblement et de glisser côté PC, etc. Alors, connaissez-vous tous les propriétés d'événement Event associées à Javascript ?
Par exemple, lorsque l’on clique sur l’événement, quelles sont les coordonnées actuelles qui apparaissent ? Tout d'abord, nous devons comprendre event.pageX, event.clientX et event.screenX, ainsi que certains problèmes de compatibilité des navigateurs avec leurs propriétés

Avant cela, nous devons également comprendre les problèmes de compatibilité des événements ; :
1. Lorsque nous examinons le comportement des événements par défaut du navigateur, la première chose qui nous vient à l'esprit est définitivement event.preventDefault()
. 2. Si nous empêchons la propagation d'événements, nous utiliserons event.stopPropagation(); 3. Lorsque nous obtenons le nœud source cible de l'événement, nous pensons à event.target
; Cependant, dans les navigateurs IE, en particulier les navigateurs inférieurs à IE9, les problèmes de compatibilité ci-dessus peuvent être résumés ici.

    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; 
          }
     },
};

Copier après la connexion

Après le traitement des événements entre navigateurs ci-dessus ; on a l'impression qu'il n'y a encore rien à voir avec le titre

Premièrement : nous devons d'abord comprendre la relation entre les trois pageX, clientX et screenX mentionnés ci-dessus

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

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

Copier après la connexion

;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!