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

Entnommen aus diese Anleitung mit den Korrekturen, die dank des ersten Kommentars vorgenommen wurden:

function getMousePos( canvas, evt ) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: Math.floor( ( evt.clientX - rect.left ) / ( rect.right - rect.left ) * canvas.width ),
        y: Math.floor( ( evt.clientY - rect.top ) / ( rect.bottom - rect.top ) * canvas.height )
    };
}

Auf einer Leinwand wie folgt verwenden:

var canvas = document.getElementById( 'myCanvas' );
canvas.addEventListener( 'mousemove', function( evt ) {
    var mousePos = getMousePos( canvas, evt );
} );

Answer 2

canvas.onmousedown = function(e) {
    pos_left = e.pageX - e.currentTarget.offsetLeft;
    pos_top = e.pageY - e.currentTarget.offsetTop;
    console.log(pos_left, pos_top)
}

HTMLElement.offsetLeft

En HTMLElement.offsetLeft Die schreibgeschützte Eigenschaft gibt die Anzahl der Pixel zurück, um die die linke obere Ecke des aktuellen Elements innerhalb des Bereichs HTMLElement.offsetParent Knoten.

Für Elemente auf Blockebene, offsetTop , offsetLeft , offsetWidth y offsetHeight beschreiben den Rahmen eines Elements relativ zum offsetParent .

Bei Elementen auf Inline-Ebene (wie z. B. span ), die von einer Zeile zur nächsten übergehen können, offsetTop y offsetLeft die Positionen des ersten Umrandungsrahmens beschreiben (verwenden Sie Element.getClientRects() um seine Breite und Höhe zu erhalten), während offsetWidth y offsetHeight beschreiben Sie die Abmessungen des Begrenzungsrahmens (verwenden Sie Element.getBoundingClientRect() um seine Position zu ermitteln). Daher wird ein Feld mit den Werten links, oben, Breite und Höhe von offsetLeft , offsetTop , offsetWidth y offsetHeight ist kein Begrenzungsrahmen für einen Bereich mit umbrochenem Text.

HTMLElement.offsetTop

En HTMLElement.offsetTop Die schreibgeschützte Eigenschaft gibt den Abstand des aktuellen Elements relativ zum oberen Rand der Tabelle offsetParent Knoten.

MausEreignis.pageX

En pageX Die schreibgeschützte Eigenschaft gibt die X-Koordinate (horizontal) des Ereignisses in Pixeln relativ zum gesamten Dokument zurück. Diese Eigenschaft berücksichtigt einen eventuellen horizontalen Bildlauf der Seite.

MausEreignis.SeiteY

En MouseEvent.pageY Die schreibgeschützte Eigenschaft gibt die Y-Koordinate (vertikal) des Ereignisses in Pixeln relativ zum gesamten Dokument zurück. Diese Eigenschaft berücksichtigt jeden vertikalen Bildlauf der Seite.

Weitere Informationen finden Sie im Mozilla Developer Network:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

Answer 3

Keine der obigen Antworten ist IMO zufriedenstellend, daher verwende ich die folgenden:

// Cross-browser AddEventListener
function ael(e, n, h){
    if( e.addEventListener ){
        e.addEventListener(n, h, true);
    }else{
        e.attachEvent('on'+n, h);
    }
}

var touch = 'ontouchstart' in document.documentElement; // true if touch device
var mx, my; // always has current mouse position IN WINDOW

if(touch){
    ael(document, 'touchmove', function(e){var ori=e;mx=ori.changedTouches[0].pageX;my=ori.changedTouches[0].pageY} );
}else{
    ael(document, 'mousemove', function(e){mx=e.clientX;my=e.clientY} );
}

// local mouse X,Y position in element
function showLocalPos(e){
    document.title = (mx - e.getBoundingClientRect().left)
        + 'x'
        + Math.round(my - e.getBoundingClientRect().top);
}

Und wenn Sie einmal die aktuelle Y-Bildlaufposition der Seite wissen müssen:

var yscroll = window.pageYOffset
        || (document.documentElement && document.documentElement.scrollTop)
        || document.body.scrollTop; // scroll Y position in page

Answer 4

const findMousePositionRelativeToElement = (e) => {
    const xClick = e.clientX - e.currentTarget.offsetLeft;
    const yClick = e.clientY - e.currentTarget.offsetTop;
    console.log(`x: ${xClick}`);
    console.log(`y: ${yClick}`);

    // or
    const rect = e.currentTarget.getBoundingClientRect();
    const xClick2 = e.clientX - rect.left;
    const yClick2 = e.clientY - rect.top;
    console.log(`x2: ${xClick2}`);
    console.log(`y2: ${yClick2}`);
}

Answer 5

Ich weiß, ich bin ein wenig spät, aber das funktioniert mit PURE javascript, und es gibt Ihnen sogar die Koordinaten des Zeigers innerhalb des Elements, wenn das Element größer ist als der Viewport und der Benutzer hat gescrollt.

var element_offset_x ; // The distance from the left side of the element to the left of the content area

....// some code here (function declaration or element lookup )

element_offset_x = element.getBoundingClientRect().left  -  document.getElementsByTagName("html")[0].getBoundingClientRect().left  ;

....// code here 

function mouseMoveEvent(event) 
{
   var pointer_location = (event.clientX + window.pageXOffset) - element_offset_x ; 
}

Wie es funktioniert.

Als Erstes ermitteln wir die Position des HTML-Elements (des Inhaltsbereichs) in Bezug auf das aktuelle Ansichtsfenster. Wenn die Seite Scrollbars hat und gescrollt wird, dann wird die Zahl, die von getBoundingClientRect().left für den html-Tag negativ sein wird. Anhand dieser Zahl wird dann der Abstand zwischen dem Element und dem linken Rand des Inhaltsbereichs berechnet. Mit element_offset_x = element.getBoundingClientRect().left......;

Kenntnis des Abstands des Elements zum Inhaltsbereich. event.clientX gibt uns den Abstand des Zeigers vom Ansichtsfenster an. Es ist wichtig zu verstehen, dass das Ansichtsfenster und der Inhaltsbereich zwei verschiedene Einheiten sind, das Ansichtsfenster kann sich bewegen, wenn die Seite gescrollt wird. Daher wird clientX die GLEICHE Zahl zurückgeben, auch wenn die Seite gescrollt wird.

Um dies auszugleichen, müssen wir die x-Position des Zeigers (relativ zum Ansichtsfenster) zur x-Position des Ansichtsfensters (relativ zum Inhaltsbereich) addieren. Die X-Position des Ansichtsfensters wird ermittelt mit window.pageXOffset.