當拖動子元素時，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