Javascript 获取鼠标当前的位置实现方法

A volte, è necessario ottenere la distanza di trascinamento della finestra o il movimento del mouse, in questo caso è possibile ottenere il risultato desiderato calcolando la posizione del mouse prima e dopo nella pagina, di seguito sono descritte alcune proprietà degli eventi:

1、Posizione delle coordinate della client area

　　Gli eventi del mouse si verificano in posizioni specifiche all'interno della vista del browser. Queste informazioni sulla posizione sono memorizzate nelle proprietà clientX e clientY dell'oggetto evento. I loro valori rappresentano le coordinate orizzontali e verticali del cursore del mouse nella vista del browser al momento dell'evento (escludendo la distanza di scorrimento della pagina). Come mostrato nella figura sottostante:

var div = document.getElementById("myDiv"); // Ottieni l'elemento
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordinate dello schermo: " + event.screenX + "," + event.screenY);
});

Nota: EventUtil.on() rappresenta l'associazione di un evento all'elemento, EventUtil.getEvent(event) rappresenta l'ottenimento dell'oggetto evento. EventUtil è un oggetto evento personalizzato (implementato in JavaScript), che contiene alcuni metodi cross-browser. Per ulteriori dettagli, vedere un altro articolo <i>Alcuni metodi di evento cross-browser</i>. Se il progetto utilizza un plugin jQuery, è possibile sostituirli con i metodi corrispondenti.

2、Posizione delle coordinate della pagina

　　Le proprietà dell'oggetto evento pageX e pageY ti dicono in quale posizione della pagina è avvenuto l'evento. In altre parole, queste proprietà rappresentano la posizione del cursore del mouse nella pagina (equivalente alle coordinate del mouse nella finestra + la distanza di scorrimento della pagina).

var div = document.getElementById("myDiv"); // Ottieni l'elemento con l'id "myDiv"
EventUtil.on(div, "click", function(event){ // Associamo l'evento click all'elemento
 event = EventUtil.getEvent(event); // Ottieni l'oggetto evento event
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//Versioni IE8 e precedenti
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Coordinate della pagina: " + pageX + "," + pageY);
});

3. Posizione delle coordinate dello schermo

　　Attraverso gli attributi screenX e screenY è possibile determinare le coordinate del puntatore del mouse rispetto allo schermo durante l'evento. Come illustrato di seguito:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordinate dello schermo: " + event.screenX + "," + event.screenY);
});

L'articolo si riferisce al libro 'Design di Programmi JavaScript Avanzato Terza Edizione'

Grazie per la lettura, spero che possa aiutare tutti, grazie per il supporto al nostro sito!