In IE11 the mouseup event not fired when clicking on a scrollbar causes sliding to stick

chris.clark1's Avatar

chris.clark1

14 Sep, 2016 12:44 AM

In IE 11 when the div holding the content of a slide has a scrollbar and you click on the scrollbar, the mouse 'sticks' to the scrollbar and slides the slide whenever you move the mouse. You can't release the mouse from the scrollbar until you leave the page.

On investigation it looks like this is caused by IE 11 not emitting a onmouseup event when you click on the scrollbar. The onmousedown event fires, initiating the sliding logic, but since there's no corresponding onmouseup, the sliding continues (this means the _upEvent, which calls _onDragRelease in RoyalSlider never gets called)

I found a site that said Microsoft has this bug as 'Won't Fix' - see https://connect.microsoft.com/IE/feedback/details/783058/scrollbar-trigger-mousedown-but-not-mouseup

Do you have any workaround for this?

  1. Support Staff 1 Posted by Dmitry Semenov on 14 Sep, 2016 05:39 AM

    Dmitry Semenov's Avatar

    Hello,

    IE11 supports pointer events and slider used them instead of mouse events. Are you sure that mousedown is bound, not pointerdown?

    Anyway, I'm not aware of any specific fix, you either do not nest scrollable containers, or you unbind pointerdown event after slider is initialized to disable its dragging functionality, for example like so:

    if( navigator.pointerEnabled && navigator.maxTouchPoints < 2) {
       $('.rsContainer').of('pointerdown click');
    }
    

    Dmitry

  2. 2 Posted by chris.clark1 on 14 Sep, 2016 06:47 AM

    chris.clark1's Avatar

    Thanks Dmitry,
    However, turning off the scrolling is not an option.

    I put in some debug code and I see that in IE 11 the pointerup event isn't triggered when clicking on the scrollbar, so the same applies as for the mouseup/down events. (pointerdown gets fired, but no pointerup, leaving the mouse stuck to the scrollbar).

    So still not sure what to do.

    Chris

  3. Support Staff 3 Posted by Dmitry Semenov on 14 Sep, 2016 02:23 PM

    Dmitry Semenov's Avatar

    You may try only manually triggering _onDragRelease method when mouse leaves the window, but I can not include such code in the official build.

  4. 4 Posted by chris.clark1 on 15 Sep, 2016 02:26 AM

    chris.clark1's Avatar

    Thanks Dmitry,

    Excuse my ignorance, but I can't figure out how to trigger _onDragRelease

  5. Support Staff 5 Posted by Dmitry Semenov on 15 Sep, 2016 06:18 AM

    Dmitry Semenov's Avatar

    Make sure that you're using unminified version, as in compressed version methods that start from _ are compressed.

    Also, you may recreate a jQuery event to pass coordinates of the end point, e.g. like so:

    if( navigator.pointerEnabled && navigator.maxTouchPoints < 2 )
      var _event = {type:'pointerup', originalEvent: {pageX:0,pageY:0} };
      $('.royalSlider').data('royalSlider')._onDragRelease(_event);
    }
    
  6. 6 Posted by chris.clark1 on 15 Sep, 2016 08:01 AM

    chris.clark1's Avatar

    Ok Dimtri, part way there.

    The mouse still sticks to the scrollbar and moves the slide so long as you don't move the mouse off the window. As soon as you move the mouse off the window it fires the event OK and all is fine, but you have to know to get the mouse off the window. However, even moving the mouse off the window then moving it back and forth again can cause the slides to move in unexpected ways (probably because of the pageX and pageY that I am not setting properly?)

    But anyway, it all stems from the original problem that there's no real way to detect that the scrollbar had a pointerup event. Moving off the window is not really the same.

    Not sure where to go now. I can see the problem is not a fault with RoyalSlider, but is a problem of trying to emulate a bit of missing functionality in IE. I guess I need some kind of hack to compute where the mouse is and detect if it has moved off the scrollbar (rather than the window)...but I don't know how to do that yet.

    (at least IE is being killed now by microsoft, i hope the future is going to be better)

  7. 7 Posted by chris.clark1 on 16 Sep, 2016 01:58 AM

    chris.clark1's Avatar

    Dmitry

    All your answers gave me ideas and finally I came up with a solution.
    That is, detect when over the scrollbar and then simply do nothing. Seems to work.

    
        if (navigator.pointerEnabled && navigator.maxTouchPoints < 2) {
            $('.rsSlide').on('pointerdown', function (event) {
                var offset = $(this).offset();
                var posX = event.originalEvent.pageX - offset.left;
                if (posX > this.clientWidth) { //is mouse over scrollbar
                    return false;
                }
            });
        }
    

    Thanks for your help Dmitry

  8. Support Staff 8 Posted by Dmitry Semenov on 16 Sep, 2016 05:13 AM

    Dmitry Semenov's Avatar

    Great idea, thanks for sharing the solution.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac