Wie erhalte ich die Mausklickposition in JavaScript? Zusammenfassung der drei zu erhaltenden Methoden

Tatsächlich haben wir uns mit Elementen in DOM befasst. Dies ist jedoch für viele Programmierer eine Enttäuschung Sehen Sie sich an, wie Sie mit js die Position des Mausklicks ermitteln, und fassen Sie ein detailliertes Tutorial für Sie zusammen.

1: Die Maus ist relativ zum Bildschirm

Wenn wir die Position des Mausklicks berücksichtigen, ist es relativ einfach , können wir erhalten Nach den Mausklicks werden screenX und screenY verwendet, um die ungefähre Position des Klicks zu bestimmen und so die relative Position zum oberen und unteren Rand des Bildschirms zu bestimmen. Wir berücksichtigen keine Faktoren wie iframe, sondern die Leistung ist in verschiedenen Browsern immer noch gleich.

Beispiel:

function getMousePos(event) {             
     var e = event || window.event;             
      return {'x':e.screenX,'y':screenY}  
}

2: Maus relativ zum Browserfenster

Wenn die Position durch den obigen einfachen Code bestimmt wird, sind diese oft still Nicht genug, denn im Allgemeinen müssen wir die Koordinaten der Maus relativ zum Browserfenster ermitteln und jeweils den oberen Rand und den linken Rand der Maus relativ zum Fenster ermitteln, die durch clientX und clientY dargestellt werden können.

Zum Beispiel:

function getMousePos(event) {              
     var e = event || window.event;              
     return {'x':e.clientX,'y':clientY} 
}

3: Maus relativ zum Dokument

Wir können clientX und clientY verwenden, um die Koordinaten des aktuellen Browserfensters abzurufen , aber diese Die Bedingungen sind alle begrenzt. Was soll ich mit den Koordinaten relativ zum Dokument tun? Zu diesem Zeitpunkt müssen wir nur die Bildlaufverschiebung hinzufügen.

Zum Beispiel:

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}

Derzeit wird das Problem mit Firefox viel einfacher sein, da Firefox die beiden Attribute pageX und pageY unterstützt und das Scrollen von Seiten bereits berücksichtigt hat.

Wie erhalte ich oben die Position des Mausklicks in JavaScript? Erhalten Sie eine vollständige Einführung in die drei Methoden. Wenn Sie mehr über das JavaScript-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Mausklickposition in JavaScript? Zusammenfassung der drei zu erhaltenden Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!