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

在下面的JSFIDLE中，单击“单击以显示菜单”链接以显示一个绝对定位的div，并附加一个jScrollPane。开始拖动滚动条拇指，但允许鼠标稍微向滚动条右侧移动，然后释放鼠标。在IE（版本8、9、10）中，会在文档上生成一个单击事件，这会触发我们的代码来隐藏菜单。在我测试过的所有其他浏览器（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;
    });
});

---

我以前也遇到过类似的

单击
事件不一致。事实证明，IE会为鼠标在
mouseup
过程中移动到的任何元素触发
click
事件，而不是为鼠标第一次以
mousedown
开始单击时移动到的元素触发
click
事件


换言之，如果您在元素A上单击，但将鼠标移动到元素B，然后释放，在IE中，您将获得：


mousedown
mouseup
用于B
单击B的