HTML奇妙なReferenceErrorがマウストラッカーを作成しようとしています

Question

私はマウストラッカーが必要なプロジェクトを作っています。これはオンラインで見つかった非常にシンプルなバージョンですが、（作業中に）エラーが発生します。私は、サイト上にマウスを移動としての私のMozilla上では、実際に更新していますが、何らかの理由ではなく、座標

<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> 

を掲載する「eが定義されていません」というエラーを生成しますこれはMozilla Firefoxの54' を使用して...私はスーパー奇妙見つけるエラー

"ReferenceError: e is not defined"

を与える

EDIT：クローム

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

を与えるので、それはSVG要素に接続されているの思考イム..？

EDITEDIT：限り私は現在、あなたがそれをラップし、SVG内のマウス位置を取得しますが、ここでは別の解決策ではないことを知って

Answer 1

HTMLのコードスニペットとして供給されたイベントハンドラを追加した関数を書くだろうかと関数オブジェクトにコンパイルされてどのようにあなたが混乱していDOM内のオブジェクトに対するイベントハンドラとして使用できます。

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

Eの定義を欠いているイベントパラメータ

function (event) { 
    setMousePosition(e); 
} 

をとる関数オブジェクトにコードスニペットをコンパイル。明白な修正はこれが動作することができます

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

を書くことですが、理由は歴史的なブラウザの違いとHTMLコード内のイベントハンドラを置くの受容性を推奨されていません。したがって、ドキュメントの準備ができたら実行する1つのソリューションは、SVG HTML要素にハンドラを追加することです。

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

この例のよう

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

を盗聴しているように見えるSVG要素をカバーし、空のdivを持つことで、回避策を見つけました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

固有のイベントハンドラー関数のEventオブジェクトは、名前の変数に割り当てられているeventないe。一般的に

onmousemove="setMousePosition(event)" 

、HTML、JavaScriptを使用してイベントリスナーを追加していないが好まれる：

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

addEventListenerに渡された関数は最初の引数としてイベントオブジェクトを受け取ります。

90年代スタイル固有のイベント属性はと同類何かをする：

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