HTML seltsames ReferenceError beim Versuch, einen Maustracker zu machen

Question

Ich mache ein Projekt, wo ich einen Maustracker brauche, also ist dies eine super einfache Version, die ich online fand, aber es gibt einen Fehler (während der Arbeit). Auf meinem Mozillas Aktualisierung es tatsächlich, wie ich um die Maus auf der Seite bewegen, aber aus irgendeinem Grund laicht er die „e ist nicht definiert“ Fehler statt der Entsendung der Koordinaten

<svg id='canvas' onmousemove="setMousePosition(e)"> 
</svg> 

<script> 
    function setMousePosition(e) { 
     var x = e.clientX; 
     var y = e.clientY; 
     console.log("x coord" + x + "y coord" + y); 
    } 
</script> 

welche gibt den Fehler

"ReferenceError: e is not defined"

, die ich super komisch finden ... mozilla firefox 54' Mit

EDIT: Chrom gibt

"Uncaught ReferenceError: e is not defined at SVGSVGElement.onmousemove (mainhtml.html:24)"

, so im mit dem SVG-Elemente es verbunden denken ..?

editEdit: fand eine Abhilfe durch ein leeres div mit dem svg Elemente abdeckt, die

Answer 1

Sie verwirrt haben, wie ein Event-Handler als Code-Schnipsel in HTML geliefert wird in eine Funktionsobjekt erstellt mit, wie Sie eine Funktion schreiben, würde hinzugefügt als Event-Handler für ein Objekt im DOM.

<svg id='canvas' onmousemove="setMousePosition(e)"> 
    </svg> 

kompiliert den Code-Schnipsel in eine Funktionsobjekt unter Ereignisparameter

function (event) { 
    setMousePosition(e); 
} 

, die eine Definition von E fehlt. Die offensichtliche Lösung ist

<svg id='canvas' onmousemove="setMousePosition(event)"> 
    </svg> 

Diese Arbeit kann zu schreiben, aber nicht wegen der historischen Browser Unterschiede zu empfehlen und die Akzeptanz Event-Handler im HTML-Code zu platzieren. Eine Lösung, die ausgeführt werden soll, wenn das Dokument fertig ist, besteht darin, dem SVG-HTML-Element einen Handler hinzuzufügen.

 document.getElementById('canvas').addEventListener("mousemove", setMousePosition); 

wie in diesem Beispiel

function setMousePosition(e) { 
 
    var x = e.clientX; 
 
    var y = e.clientY; 
 
    console.log("x coord " + x + " y coord " + y); 
 
} 
 
document.getElementById("canvas").addEventListener("mousemove", setMousePosition);

<svg id="canvas" height=200 width=400 style="border: thin solid blue"> 
 
</svg>

Answer 2

bis abgehört zu werden scheint, ich weiß noch nicht Mausposition innerhalb svg bekommen kann, aber hier alternative Lösung, wickeln Sie es in div

function setMousePosition(e) { 
 
    var x = e.clientX; 
 
    var y = e.clientY; 
 
    document.getElementById('position').innerHTML = ("Position: x coord: " + x + "/y coord: " + y); 
 
}

#svg-containe { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
#canvas { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    border: 1px dashed #bbb; 
 
}

<div id="svg-container" onmousemove="setMousePosition(event)"> 
 
    <svg id='canvas'></svg> 
 
</div> 
 
<p id="position"> 
 
</p>

Answer 3

Das Event-Objekt in einer intrinsischen Event-Handler-Funktion wird auf eine Variable mit dem Namen zugewiesen event nicht e.

document.querySelector("svg").addEventListener("mousemove", setMousePosition); 

Die Funktion übergeben addEventListener erhält das Ereignisobjekt als erstes Argument: nicht HTML mit JavaScript, Ereignis-Listener hinzufügen

onmousemove="setMousePosition(event)" 

Im Allgemeinen wird es bevorzugt.

Die 90er Jahre Stil intrinsische Ereignis Attribute tun so etwas wie:

document.querySelector("svg").addEventListener("mousemove", function (event) { /* attribute value here */ });