Modernste Methode zum Abrufen der Mausposition innerhalb einer Zeichenfläche in nativem JavaScript

Erstens weiß ich, dass diese Frage oft gestellt wurde. Die Antworten sind jedoch nicht konsistent und es werden verschiedene Methoden verwendet, um die Mausposition zu ermitteln. Einige Beispiele:

Methode 1:

canvas.onmousemove = function (event) { // this  object refers to canvas object  
Mouse = {
    x: event.pageX - this.offsetLeft,
    y: event.pageY - this.offsetTop
}
}

Methode 2:

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
  x: evt.clientX - rect.left,
  y: evt.clientY - rect.top
};
}

Methode 3:

var findPos = function(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) { 
    do {
       curleft += obj.offsetLeft;
       curtop += obj.offsetTop; 
    } while (obj = obj.offsetParent);
}
return { x : curleft, y : curtop };
};

Methode 4:

var x;
var y;
if (e.pageX || e.pageY)
{
    x = e.pageX;
    y = e.pageY;
}
else {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

und so weiter.

Ich bin gespannt, welche Methode in Bezug auf Browserunterstützung und Bequemlichkeit beim Abrufen der Mausposition in einer Zeichenfläche die modernste ist. Oder sind es solche Dinge, die nur marginale Auswirkungen haben und eine der oben genannten ist eine gute Wahl? (Ja, mir ist klar, dass die obigen Codes nicht exakt gleich sind.)

Antworten auf die Frage(3)

Ihre Antwort auf die Frage