Question

我有一个div，其中包含多个水平显示的span按钮。屏幕上有太多按钮，因此我希望用户能够单击并拖动整行按钮。但是，如果拖动了行，我不希望触发按钮的mouseup事件。

holder仅包含button元素。这是ASCII表示：

-------------------------------
| btn | btn | btn | btn | btn |
-------------------------------

以下是代码设置。当前按钮上的mouseup处理程序在持有者处理程序之前被调用（处理程序在冒泡阶段被调用），因此在持有者的event.preventPropagation()处理程序中调用mouseup没有帮助

<div id="holder">
    <span class="button"></span>
</div>

$('#holder').mousedown( function () {
    $(document).mousemove( function () {
        // scroll content of #holder
    } ).mouseup( function () {
        // stop scrolling
        $(document).unbind('mouseup').unbind('mousemove');
    } );
} );

$('.button').mouseup( function () {
    $('document').mousemove( function () {
        // do some action here, but only if holder hasn't scrolled on mousedown
    } );
} );

有什么想法吗？

Answer 1

为什么不使用全局变量来控制流程，如下所示：

var scrolled = false;

$('#holder').mousedown( function () {
    $(document).mousemove( function () {
        scrolled = true;
        // scroll content of #holder

    } ).mouseup( function () {
        // stop scrolling
        $(document).unbind('mouseup').unbind('mousemove');
    } );
} );

$('.button').mouseup( function () {
    $('document').mousemove( function () {
        if (scrolled == false) {
            // do some action here, but only if holder hasn't scrolled on mousedown
        }
    } );
} );

如果之前调用了mousemove，jquery会阻止mouseup

1 个答案: