Javascript 尝试创建鼠标跟踪器时发生HTML奇怪的引用错误

我正在做一个项目，我需要一个鼠标跟踪器，所以这是一个超级简单的版本，我在网上找到的，但它给出了一个错误（在工作时）。在我的mozilla上，当我在站点上移动鼠标时，它实际上正在更新，但由于某种原因，它产生了“e未定义”错误，而不是发布坐标

<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）{
var x=e.clientX；
变量y=e.clientY；
控制台日志（“x坐标”+x+“y坐标”+y）；
}

这就产生了错误

“引用错误：未定义e”

我觉得非常奇怪。。。使用mozilla firefox 54'

编辑：chrome提供

“未捕获引用错误：未定义e 在SVGSVGElement.onmousemove（mainhtml.html:24）”上

，所以我认为它连接到SVG元素

---

EDITEDIT：找到了一种解决方法，它使用一个空div覆盖svg元素，据我所知，目前无法在svg中获取鼠标位置，但在这里，另一种解决方案是将其包装在div中

函数设置鼠标位置（e）{
var x=e.clientX；
变量y=e.clientY；
document.getElementById（'position'）.innerHTML=（“position:x坐标：“+x+”/y坐标：“+y”）；
}

#svg包含{
位置：相对位置；
宽度：300px；
高度：300px；
}
#帆布{
位置：绝对位置；
左：0px；
顶部：0px；
边框：1px虚线#bbb；
}

内部事件处理程序函数中的事件对象被分配给名为

事件
的变量，而不是
e

onmousemove="setMousePosition(event)"

通常，最好使用JavaScript而不是HTML添加事件侦听器：

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

传递给
addEventListener
的函数将接收事件对象作为第一个参数

90年代风格的内部事件属性的作用类似于：

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

您混淆了如何将HTML中作为代码段提供的事件处理程序编译为函数对象，以及如何将作为事件处理程序添加的函数写入DOM中的对象

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

它缺少e的定义。显而易见的解决办法是写作

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

如本例所示


函数设置鼠标位置（e）{
var x=e.clientX；
变量y=e.clientY；
控制台日志（“x坐标”+x+“y坐标”+y）；
}
document.getElementById（“canvas”）.addEventListener（“mousemove”，setMousePosition）
获取SVG元素的位置，而不是鼠标指针的位置。
    <svg id='canvas' onmousemove="setMousePosition(event)">
    </svg>

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