JS Get Mouse Coordinate Position Example Analysis_Javascript Skills

Artikel ini menganalisis kaedah mendapatkan kedudukan koordinat tetikus menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kedudukan koordinat tetikus adalah seperti berikut: kedudukan koordinat tetikus dalam viewport (clientX, clientY), kedudukan koordinat tetikus pada halaman (pageX, pageY), kedudukan koordinat tetikus pada skrin (screenX, screenY), di mana tetikus berada dalam Kedudukan koordinat port pandangan (clientX, clientY) dan kedudukan koordinat tetikus pada skrin (screenX, screenY) disokong dalam semua pelayar, tetapi kedudukan koordinat bagi tetikus pada halaman (pageX, pageY) disokong dalam IE8 dan versi terdahulu. Ia tidak disokong, tetapi tidak penting Nilai pageX dan pageY boleh dikira melalui scrollLeft dan scrollTop.

Yang pertama ialah objek acara silang penyemak imbas

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

1. Kedudukan koordinat viewport

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

2.Kedudukan koordinat skrin

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

3. Lokasi koordinat halaman

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

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan operasi tetikus JavaScript boleh menyemak topik khas tapak ini: " Ringkasan kemahiran operasi tetikus JavaScript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.