Question

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

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

  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 中有任何可能的解决方案吗？我花了很多时间在这上面......

我会在网上寻求答案，非常感谢你！

Answer 1

这是由于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 spoofs it in other browsers。

在ie8中没有触发jQuery mouseup

1 个答案: