当拖动子元素时，IE会为绝对定位的div生成虚假的鼠标单击事件

Question

In the jsFiddle below, click the link 'Click to show menu' to display an absolute-positioned div with a jScrollPane attached. Start dragging the scrollbar thumb but allow the mouse to wander a little to the right of the scrollbar, and then release the mouse. In IE (versions 8,9,10) a click event is generated on the document, which triggers our code to hide the menu. In all other browsers I've tested (Firefox, Chrome, Safari) no such click event is generated on the document and the menu remains displayed (as desired).

In our web app, we want clicks outside the menu (ie, those that reach the document) to hide the menu. However, we don't want the menu to be hidden as a side-effect of a drag initiated from within the scrollpane itself.

Is there any simple workaround to avoid this issue? Can the jScrollPane be updated somehow to avoid the problem?

$(document).ready(function () {

    $('.scroll-pane').jScrollPane();

    $('#menu').click(function () {
        console.info('menu clicked');
        var api = $('.scroll-pane').show().data('jsp');
        api.reinitialise();

        return false;
    });

    $(document).click(function () {
        console.info('document clicked');
        $('.scroll-pane').hide();
    });

    $('.scroll-pane').bind('mousedown', function (ev) {
        console.info('scroll pane mousedown');
    }).bind('mouseup', function (ev) {
        console.info('scroll pane mouseup');
    }).bind('click', function (ev) {
        console.info('scroll pane click');
        return false;
    });
});

http://jsfiddle.net/catweazle/KWbhM/2/

Answer 1

I encountered similar click event inconsistencies previously as well. It turns out that IE fires the click event for whatever element the mouse is over during mouseup , and not for the element it was over when the click first started with mousedown .

https://stackoverflow.com/a/4606960/17803

In other words - if you click down while over element A, but move mouse to element B, and then release, in IE you will get:

• mousedown for A
• mouseup for B
• click for B