Question

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

在我们的网络应用中，我们希望菜单外的点击（即到达文档的点击）隐藏菜单。但是，我们不希望将菜单隐藏为从滚动窗格本身内部启动的拖动的副作用。

是否有任何简单的解决方法可以避免此问题？可以以某种方式更新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在click期间针对鼠标所覆盖的任何元素触发mouseup事件，而不是针对mousedown点击首次点击时所覆盖的元素。

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

换句话说 - 如果你在元素A上单击，但将鼠标移动到元素B，然后释放，在IE中你会得到：

mousedown代表A
mouseup代表B
click代表B

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

1 个答案: