JS Get Mouse Coordinate Position Example Analysis_Javascript Skills-tutorial js-php.cn

JS Get Mouse Coordinate Position Example Analysis_Javascript Skills

WBOY

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

asal

1222 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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.