MouseEvent 在 IE 中不起作用，还有其他方法吗？答案

【问题标题】：MouseEvent not working in IE, is there another methods?MouseEvent 在 IE 中不起作用，还有其他方法吗？
【发布时间】：2018-12-25 09:15:51
【问题描述】：

这个结构在 IE 中不起作用，我想找到另一种使用它的方法。

let evt = new MouseEvent("mousemove", {
  clientX: null,
  clientY: null
});

canvas.dispatchEvent(evt);

【问题讨论】：

XY 问题，这里不要dispatch Event，只要调用事件处理函数调用的任何函数即可。

标签： javascript internet-explorer

【解决方案1】：

尝试参考下面的示例可能会帮助您解决问题。

代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
      }, false);
    </script>
  </body>
</html>

在 IE 中的输出：

参考：

HTML5 Canvas Mouse Coordinates Tutorial

【讨论】：