JS Beispiel für Analyse der Mauskoordinatenposition, Analyse_Javascript-Kenntnisse-js-Tutorial-php.cn

JS Beispiel für Analyse der Mauskoordinatenposition, Analyse_Javascript-Kenntnisse

WBOY

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

Original

1220 Leute haben es durchsucht

In diesem Artikel wird die Methode zum Ermitteln der Mauskoordinatenposition mithilfe von JS analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Koordinatenpositionen der Maus sind wie folgt: die Koordinatenposition der Maus im Ansichtsfenster (clientX, clientY), die Koordinatenposition der Maus auf der Seite (pageX, pageY), die Koordinatenposition der Maus auf Der Bildschirm (screenX, screenY), auf dem sich die Maus befindet. Die Koordinatenposition des Ansichtsfensters (clientX, clientY) und die Koordinatenposition der Maus auf dem Bildschirm (screenX, screenY) werden in allen Browsern unterstützt, aber die Koordinatenposition von Die Maus auf der Seite (pageX, pageY) wird in IE8 und früheren Versionen unterstützt. Die Werte von pageX und pageY können über scrollLeft und scrollTop berechnet werden.

Das erste ist das browserübergreifende Ereignisobjekt

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

Nach dem Login kopieren

1. Koordinatenposition im Ansichtsfenster

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

Nach dem Login kopieren

2.Bildschirmkoordinatenposition

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

Nach dem Login kopieren

3. Standort der Seitenkoordinaten

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

Nach dem Login kopieren

Leser, die an weiteren Inhalten im Zusammenhang mit der JavaScript-Mausbedienung interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung der JavaScript-Mausbedienungsfähigkeiten“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.