IE event fix #394

fizk · 2015-07-20T03:32:25Z

For what ever reason, IE=<10 did not provide it's events with pageX and pageY values. 'Cause of this. This plugin did not work in IE=<10.

This PR fixes this. It will first try to use event.originalEvent, but fall back on event if required.

This is what I did to come to this conclusion:

I found a real computer with real IE10.

I ran your demo (http://fengyuanchen.github.io/cropper/). It did not work.

Then I cloned your repo, created an index.html page and added this:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <link  href="/dist/cropper.css" rel="stylesheet">
        <script src="/dist/cropper.js"></script>
    </head>
    <body>

        <div class="container">
            <img src="/picture.png">
        </div>

        <script type="text/javascript">

            $('.container > img').cropper({
              aspectRatio: 16 / 9,
              crop: function(data) {
                // Output the result data for cropping image.
              }
            });

        </script>
    </body>
</html>

Next I tried it with jQuery v1.9.1, v1.11.3 and v2.1.4. It did not work.

Then I hopped into the debugger to see what was going on.

This is the stack for onDragStart. As you can see, startX and startY is undefined, 'cause e has no pageX and pageY.

Next I changed e.pageX to originalEvent.pageX and e.pageY to originalEvent.pageY and added a breakpoint on the same line.

Now everything worked. this has its startX and startY values set.

I don't know why this happens and why e does not have it's pageXand pageY properties set.

I was wondering if IE is using its global event object and not the argument passed to the function here:

dragmove: function (event) {
      var options = this.options,
          originalEvent = event.originalEvent,
          touches = originalEvent && originalEvent.touches,
          e = event, //< ---- here
          dragType = this.dragType,
          dragMoveEvent,
          touchesLength;

anyways... by using the original event, I can get this to work.

arthens · 2015-07-28T04:36:43Z

I'm having this problem too... any update?

dlin-me · 2015-07-28T05:06:35Z

Same here. Would love to have this fixed. Thanks

fengyuanchen · 2015-07-30T13:55:35Z

@fizk Any files in the dist directory should not be changed until release a new version.

fizk added 2 commits July 20, 2015 12:31

Making original event primary, default to event

689fcf9

Made event.originalEvent primary, fallback to event for tests

720479b

fengyuanchen closed this in 20ab5af Jul 30, 2015

fengyuanchen mentioned this pull request Aug 9, 2015

IE 10 cropping area is not movable #416

Closed

fengyuanchen mentioned this pull request Aug 17, 2015

Various issues in IE8 #319

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IE event fix #394

IE event fix #394

fizk commented Jul 20, 2015

arthens commented Jul 28, 2015

dlin-me commented Jul 28, 2015

fengyuanchen commented Jul 30, 2015

IE event fix #394

IE event fix #394

Conversation

fizk commented Jul 20, 2015

arthens commented Jul 28, 2015

dlin-me commented Jul 28, 2015

fengyuanchen commented Jul 30, 2015