javascript - HTML5 : Preventing helper auto-scroll functionality during dragging

Question

很难在 Internet 上搜索有关此行为的信息，因为我不知道与之相关的术语。我会尽力描述它。

这是几乎所有支持滚动的浏览器元素中通常会发生的行为:如果您单击鼠标，然后按住按钮将其拖动到滚动区域之外，它会自动滚动水平或垂直朝向您退出的方向。

当您试图选择页面元素来复制它们时，它非常有用，但在执行其他自定义操作时必须防止这种行为。我试图实现的功能是能够通过拖动鼠标来拖动页面，这很像 PDF 查看器中突出显示的抓手鼠标工具。它使用最少的代码就可以很好地工作，但是我不知道如何在鼠标离开可滚动区域后禁用此助手自动滚动。

    $("#scroll_area").on('mousedown', function (e) {
        startPos.x = e.clientX;
        startPos.y = e.clientY; 
        drag = true;
    });
    $(document).on('mousemove', function (e) {
        if (drag) {
            // find relative mouse motion
            var diffX = e.clientX - startPos.x;
            var diffY = e.clientY - startPos.y;
            // scroll our body by the relative amount. 
            document.body.scrollTop -= diffY;
            document.body.scrollLeft -= diffX;
            startPos.x = e.clientX;
            startPos.y = e.clientY; // continue updating
            return false; // if dragging do not perform regular things
        }
    });
    $(document).on('mouseup', function (e) {
        // clean up the drag no matter where you let go of the mouse.
        // don't bother evaluating motion here. 
        drag = false;
    });

我希望 return false 可以解决问题，但事实并非如此。事实上，即使鼠标停止移动(当鼠标被拖出滚动区域时)，自动滚动也会继续。

Answer 1

您尝试过 preventDefault 吗？

$("#scroll_area").on('mousedown', function (e) {
    e.preventDefault();
});

这将阻止页面上的所有拖动。然后，您可以只实现您希望在拖动时发生的功能。

JSFiddle 示例:http://jsfiddle.net/nwGaF/1/