jQuery mouseup 没有在 ie8 中触发答案

【问题标题】：jQuery mouseup not fired in ie8jQuery mouseup 没有在 ie8 中触发
【发布时间】：2014-02-25 23:10:10
【问题描述】：

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

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

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

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

【问题讨论】：

This question 看起来相关。 this one也是如此。
谢谢，但已经尝试了谷歌地图，不适合我:(
link的可能重复

标签： jquery mouseup

【解决方案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.

【讨论】：