Maison > interface Web > js tutoriel > le corps du texte

JS Obtenir un exemple de position des coordonnées de la souris Analysis_Javascript Skills

WBOY
Libérer: 2016-05-16 15:19:02
original
1190 Les gens l'ont consulté

Cet article analyse la méthode d'obtention de la position des coordonnées de la souris à l'aide de JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Les positions des coordonnées de la souris sont les suivantes : la position des coordonnées de la souris dans la fenêtre (clientX, clientY), la position des coordonnées de la souris sur la page (pageX, pageY), la position des coordonnées de la souris sur l'écran (screenX, screenY), où se trouve la souris. La position des coordonnées de la fenêtre (clientX, clientY) et la position des coordonnées de la souris sur l'écran (screenX, screenY) sont prises en charge dans tous les navigateurs, mais la position des coordonnées de la souris sur la page (pageX, pageY) est prise en charge dans IE8 et les versions antérieures. Elle n'est pas prise en charge, mais cela n'a pas d'importance. Les valeurs de pageX et pageY peuvent être calculées via scrollLeft et scrollTop.

Le premier est l'objet événement multi-navigateur

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

Copier après la connexion

1. Position des coordonnées de la fenêtre

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

Copier après la connexion

2.Position des coordonnées de l'écran

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

Copier après la connexion

3. Emplacement des coordonnées de la page

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

Copier après la connexion

Les lecteurs intéressés par plus de contenu lié au fonctionnement de la souris JavaScript peuvent consulter le sujet spécial de ce site : "Résumé des compétences liées au fonctionnement de la souris JavaScript"

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!