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

2019年8月4日 211次阅读

我在网站上搜索过,但没有得到有用的信息.一个简单的演示可以在
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');
    });
});

在网站上进行了更多的搜索并获得了类似的question.问题中提出的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);
    });
});

最佳答案 我在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');
        });

    });


});

当mousedown基本上将mouseup绑定到Document,然后在触发后删除绑定:)这样无论鼠标在哪里都会触发mouseup

点赞