在IE和Safari中滚动条移动后不会触发mouseup事件

mouseup event is not triggered after scroll bar moves in IE and Safari

本文关键字：事件 mouseup 移动 IE Safari 滚动条      更新时间：2023-09-26

我在网站上搜索了一下，但没有得到对我的情况有用的信息。一个简单的演示可以在jsfiddle找到。当我移动到div滚动条并按下鼠标时，事件'mousedown'被触发。然后我滚动条，松开鼠标。不幸的是，事件'mouseup'没有在IE/Safari中触发。Chrome和Firefox可以正常工作。是否有IE和Safari的变通解决方案?谢谢!

示例代码:

<div class="box">
    <div class="box-inner">
    </div>
</div>
<p id="text"></p>
jQuery: 

$(document).ready(function() {
    var $txt = $('#text');
    $('.box').mouseup(function() {
        $txt.text('mouseup');
    });
    $('.box').mousedown(function() {
        $txt.text('mousedown');
    });
});

在网站上做了更多的搜索，得到了类似的问题。问题中提出的solution虽不完善，但值得一试。

$(document).ready(function() {
    var $txt = $('#text'), $win = $(window), $doc = $(document);
    $win.on('mousedown', function(event) {
        $txt.text('mousedown');
        if(event.pageX < ($win.width() - 10)) {
            return;
        }
        $doc.on('mousemove', function(event) {
            if(event.pageX < ($win.width() - 10)){
                //mouse is off scrollbar
                $(this).unbind(event);
                $win.trigger('mouseup', ['manual fire']);
            }
        });
    }).on('mouseup', function(event, str) {
        $txt.text('mouseup: ' + str);
    });
});

mouseup在Safari中为我开火…我不能在IE中测试，因为我在Mac上，但请试试这个:

http://jsfiddle.net/CmW9e/4/

$(document).ready(function() {
    var $txt = $('#text');
    $('.box').on("mousedown.box", function() {
        $txt.text('mousedown');
        $(document).one("mouseup.box", function() {
            $txt.text('mouseup');
        });
    });

});

基本上是将mouseup绑定到Document，当你mousedown，然后在它触发后删除绑定:)这样，mouseup将总是触发，无论鼠标在哪里

相关文章：