Question

我在网站上搜索过，但没有得到有用的信息。可以在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);
    });
});

Answer 1

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将总是无论鼠标在哪里都会触发

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

1 个答案: