CODEWITHSUNDEEP
jquerymouseup
simon
simon

Reputation: 15

jQuery mouseup not fired in ie8

I have some code archive such a function:

In the browser, I can drag an image, code like this:

  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;
  }

I have only copied part of the functions, but should be clear enough...

The problem is the mouseup event, it's working fine in all browsers except IE8.

When one drags the thumb and releases the mouse outside the browser, any mouse movement (without pressing the mouse) will cause the image to move. To stop this auto move, one has to click again.

So that means:

Any possible solution for this in IE8? I have spent much time on this...

I will be online for answers, thank you very much!

Upvotes: 1

Views: 1745

Answers (1)

Keith
Keith

Reputation: 155692

This is due to a bug in IE8, I think due to a badly implemented security fix.

In IE8, once the mouse has left the document no mouse events fire, including document.mouseup - I think this is due to an earlier security bug in IE where you could get the coordinates of mouseclicks outside the browser window.

To get round this you need to fire another event when the mouse leaves the content area. Fortunately IE has a propriety event here we can use:

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);
}

Note that mouseleave is the needed behaviour - it fires once when the mouse leaves the document area. Browsers other than IE support mouseout instead, but that fires each time the mouse crosses child content. It's useful, so jQuery spoofs it in other browsers.

Upvotes: 2

Related Questions