HTML5：在拖动过程中防止助手自动滚动功能

在互联网上搜索有关此行为的信息非常困难，因为我不知道与其关联的术语。我会尽我所能来形容它。HTML5：在拖动过程中防止助手自动滚动功能

这是通常发生在几乎是支持滚动任何浏览器元素的行为：如果单击鼠标，然后将其外滚动区域的同时按住按钮，它就会自动水平或垂直向滚动你退出的方向。

当您试图选择页面元素来复制它们时，这非常有用，但在执行其他自定义操作时必须防止该行为。我试图实现的功能是通过拖动鼠标拖动页面的功能，就像在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; 
    });

我的希望是，返回false将解决问题，但它不会。事实上，即使当鼠标停止移动（当它被拖动到滚动区域之外时），自动滚动仍然继续。

来源

2012-10-17 Steven Lu

您是否尝试禁用选择行为？请参阅http://stackoverflow.com/questions/69430/ – Neil

是的，我已经做到了。 –

您是否试过preventDefault？

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

这将防止所有页面上的拖动。然后，您可以实现您想要在拖动时发生的功能。

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

来源

2012-10-17 19:28:56 Dcullen

我已将此添加到我的mousemove回调的开头。仍然不会改变行为。它确实应该，但它不起作用。 –

尝试将其添加到#scroll_area。它应该传播，但只是为了确保。接下来的事情，我会尝试，如果这样做的确如此，确保一切都按预期调用（控制台日志+警报） – Dcullen

在'mousedown'上使用'preventDefault（）'做了诀窍。你应该编辑你的答案来说，我会接受它。 –

HTML5：在拖动过程中防止助手自动滚动功能

回答

相关问题