Question

我正在制作一个项目，我需要一个鼠标跟踪器，所以这是我在网上找到的一个超级简单的版本，但它给出了一个错误（工作时）。在我的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>

哪个给出了错误

“ReferenceError：e未定义”

，我发现它非常奇怪...使用mozilla firefox 54'

编辑：chrome给出

“未捕获的ReferenceError：e未定义在SVGSVGElement.onmousemove（mainhtml.html：24）“

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

EDITEDIT：找到一个解决方法，让一个空的div覆盖svg元素，似乎是在窃听

Answer 1

内部事件处理函数中的Event对象被分配给名为event而不是e的变量。

onmousemove="setMousePosition(event)"

通常，首选使用JavaScript而不是HTML来添加事件侦听器：

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

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

90年代风格的内在事件属性类似于：

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

Answer 2

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

sk_buff

将代码片段编译为带有事件参数

的函数对象

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

缺乏e的定义。显而易见的解决方法是写

function ( event) {
     setMousePosition(e);
}

这可以工作但不建议使用，因为历史浏览器的差异以及在HTML代码中放置事件处理程序的可接受性。因此，在文档准备就绪时执行的一个解决方案是向SVG HTML元素添加处理程序。

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

如本例所示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

据我所知，目前你无法在svg中获得鼠标位置，但在这里替代解决方案，将其包装在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>

尝试制作鼠标跟踪器时HTML奇怪的ReferenceError

3 个答案: