1

我有一些代码存档这样的功能：

在浏览器中，我可以拖动图像，代码如下：

  function activateMove() {
      isMoving = false;
      $thumb.bind('mousedown', startMove);
  }

  function startMove() {
      isMoving = true;
      $(document).bind('mousemove', moveUpdate);
      $(document).bind('mouseup', endMove);
      return false;
  }

  function endMove() {
      isMoving = false;
      $(document).unbind('mousemove', moveUpdate);
      $(document).unbind('mouseup', endMove);
      return false;
  }

我只是复制了部分功能，但应该足够清楚......

问题是 mouseup 事件，它在除IE8之外的所有浏览器中都可以正常工作。

当一个人在浏览器外拖动拇指并释放鼠标时，任何鼠标移动（不按下鼠标）都会导致图像移动。要停止此自动移动，必须再次单击。

所以这意味着：

  • 点击图片
  • 拖动它，然后在页面可见区域之外释放鼠标（例如在地址栏上释放鼠标）
  • 现在，如果您上下移动鼠标，图像会随着鼠标移动（这不是理想的行为）

在IE8中有什么可能的解决方案吗？我花了很多时间在这...

我会在线解答的，非常感谢！

4

1 回答 1

2

这是由于 IE8 中的一个错误，我认为是由于实施不善的安全修复。

在 IE8 中，一旦鼠标离开文档，就不会触发鼠标事件，包括document.mouseup- 我认为这是由于 IE 中较早的安全漏洞，您可以在浏览器窗口外获取鼠标点击的坐标。

为了解决这个问题，您需要在鼠标离开内容区域时触发另一个事件。幸运的是 IE 在这里有一个适当的事件我们可以使用：

function startMove() {
   isMoving = true;
   $(document).bind('mousemove', moveUpdate);
   return false;
}

function endMove() {
   isMoving = false;
   $(document).unbind('mousemove', moveUpdate);
   return false;
}

function activateMove() {
   isMoving = false;
   $thumb.bind('mousedown', startMove);
   $(document).bind('mouseup', endMove);

   //IE8 hack - also end the move when the mouse leaves the document
   $(document).bind('mouseleave', endMove);
}

请注意，这mouseleave是所需的行为 - 当鼠标离开文档区域时它会触发一次。IE 以外的浏览器支持mouseout，但每次鼠标穿过子内容时都会触发。它很有用，所以 jQuery在其他浏览器中欺骗了它。

于 2014-02-25T15:10:10.477 回答