Mausposition relativ zum Element finden

Question

Ich möchte eine kleine Mal-App mit Canvas erstellen. Ich muss also die Position der Maus auf der Leinwand finden.

Answer 1

Da ich keine jQuery-freie Antwort gefunden habe, die ich kopieren/einfügen könnte, ist hier die Lösung, die ich verwendet habe:

document.getElementById('clickme').onclick = function clickEvent(e) {
      // e = Mouse click event.
      var rect = e.target.getBoundingClientRect();
      var x = e.clientX - rect.left; //x position within the element.
      var y = e.clientY - rect.top;  //y position within the element.
      console.log("Left? : " + x + " ; Top? : " + y + ".");
    }

#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}

<div id="clickme">Click Me -<br>
(this box has margin-left: 100px; margin-top: 20px;)</div>

JSFiddle des vollständigen Beispiels

Answer 2

Für Leute, die JQuery verwenden:

Wenn Sie verschachtelte Elemente haben, von denen eines mit einem Ereignis verknüpft ist, kann es manchmal verwirrend sein zu verstehen, was Ihr Browser als das übergeordnete Element ansieht. Hier können Sie angeben, welches übergeordnete Element.

Sie nehmen die Mausposition und subtrahieren sie von der Offsetposition des übergeordneten Elements.

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

Wenn Sie versuchen, die Mausposition auf einer Seite innerhalb eines Bildlauffensters zu ermitteln:

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

Oder die Position relativ zur Seite:

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

Beachten Sie die folgende Leistungsoptimierung:

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

Auf diese Weise muss JQuery nicht nachschlagen #element für jede Zeile.

Update

Es gibt eine neuere, auf JavaScript beschränkte Version in eine Antwort by @anytimecoder -- siehe auch Browser-Unterstützung für getBoundingClientRect() .

Answer 3

Im Folgenden wird die Mausposition in Bezug auf das Canvas-Element berechnet:

const example = document.getElementById('example');

example.onmousemove = function(e) { 
    const x = e.pageX - e.currentTarget.offsetLeft; 
    const y = e.pageY - e.currentTarget.offsetTop; 
}

Answer 4

Es gibt keine Antwort in reinem Javascript, die relative Koordinaten zurückgibt, wenn das Referenzelement in anderen verschachtelt ist, die mit absoluter Positionierung sein kann. Hier ist eine Lösung für dieses Szenario:

function getRelativeCoordinates (event, referenceElement) {

  const position = {
    x: event.pageX,
    y: event.pageY
  };

  const offset = {
    left: referenceElement.offsetLeft,
    top: referenceElement.offsetTop
  };

  let reference = referenceElement.offsetParent;

  while(reference){
    offset.left += reference.offsetLeft;
    offset.top += reference.offsetTop;
    reference = reference.offsetParent;
  }

  return { 
    x: position.x - offset.left,
    y: position.y - offset.top,
  }; 

}

Answer 5

Ich habe alle diese Lösungen ausprobiert, aber aufgrund meiner speziellen Konfiguration mit einem matrix-transformierten Container (Panzoom-Bibliothek) hat keine funktioniert. Dies gibt den richtigen Wert, auch wenn gezoomt und geschwenkt:

mouseevent(e) {
 const x = e.offsetX,
       y = e.offsetY
}

Aber nur, wenn keine untergeordneten Elemente im Weg sind. Dies kann umgangen werden, indem man sie mit CSS für das Ereignis "unsichtbar" macht:

.child {
   pointer-events: none;
}