firefox 鼠标事件未定义

Question

我有一个在 canvas 上绘图的脚本。我在 mousedown 上添加了一个事件侦听器，并在 mouse up 上删除了侦听器。它适用于 Chrome 但不适用于 Firefox。

代码是这样的：

  $('#sketchCanvas').on("mousedown", function () {
      $('#sketchCanvas').on("mousemove", drawSketch);
  });

  $('#sketchCanvas').on("mouseup", function () {
      $('#sketchCanvas').off("mousemove", drawSketch);
  });

  drawSketch = function (event) {
      $("#mouseXY").text("x: "+event.offsetX + " y: " + event.offsetY);
  };

.redborder {
    border:solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="sketchCanvas" width="200" height="200" class="redborder"></canvas>
<br/>
<span id="mouseXY" class="redborder">mouse coordinates</span>

这是相同代码的 jsfiddle 示例：http://jsfiddle.net/womvLmk5/14/

知道为什么会这样吗？上面的代码有什么问题？

谢谢！

Answer 1

这样试试：

  drawSketch = function (event) {
      var eTgtPos = $(event.target).offset(),
          x = (event.offsetX || event.clientX - eTgtPos.left),
          y = (event.offsetY || event.clientY - eTgtPos.top);
      $("#mouseXY").text("x: "+x + " y: " + y);
  };

见this fiddle

鼠标事件对象是在 Firefox 中定义的，只是 offsetX 和 offsetY 没有在该对象中定义。

我也改变了这一点来处理鼠标离开草图区域：

  $('#sketchCanvas').on("mouseup mouseleave", function () {
      $('#sketchCanvas').off("mousemove", drawSketch);
  });

这使得事件关闭，即使 mouseup 事件发生在 canvas

之外

HTH

firefox 鼠标事件未定义

firefox mouse event not defined

mouse

firefox

jquery

events