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

Question

在下面的jsFiddle中，单击链接“单击以显示菜单”以显示带有jScrollPane的绝对位置的div。 开始拖动滚动条的拇指，但是允许鼠标在滚动条的右侧稍稍漂移，然后释放鼠标。 在IE（版本8、9、10）中，文档上会生成一个click事件，这会触发我们的代码隐藏菜单。 在我测试过的所有其他浏览器（Firefox，Chrome，Safari）中，不会在文档上生成此类单击事件，并且菜单仍会显示（根据需要）。

在我们的Web应用程序中，我们希望菜单外的点击（即到达文档的那些点击）隐藏菜单。 但是，我们不希望菜单隐藏为从滚动窗格自身内部发起的拖动的副作用。

有没有简单的解决方法来避免此问题？ 可以通过某种方式更新jScrollPane以避免该问题吗？

$(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

我以前也遇到过类似的click事件不一致问题。 事实证明，IE会为mouseup期间鼠标悬停的任何元素触发click事件，而不是第一次单击mousedown时发生的元素触发click事件。

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

换句话说-如果您在元素A上方单击时将鼠标移至元素B，然后释放，则在IE中，您将获得：

• A的mousedown
• B的mouseup
• click B