Question

我有一个用于在画布上绘图的脚本。我在mousedown上添加了一个事件监听器，并在鼠标上移除了监听器。它适用于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事件发生在画布外

，事件也会关闭

HTH

firefox鼠标事件未定义

1 个答案: