防止将拖放拖放到窗口滚动条上

Question

我有一个问题，即我的html应用程序导航了＃39;用户将拖放到其上的内容。例如，在应用程序上删除文本文件会导致页面导航到它。

我通过在文档上注册事件处理程序并附加到dragenter，dragover，dragleave和drop事件来解决这个问题。在处理程序中，我调用了preventDefault和stopPropagation，当删除任何与预期（和处理的）文件类型不匹配的内容时，它会很有效。

问题是用户可以放入垂直滚动条（意外或其他方式）并且不会命中处理程序。我认为这是因为滚动条与文档对象的关系不同于不同的子项。

如何防止垂直滚动条上的文件丢弃导航???

var globalDnd = function (event) {
  // Prevent drag and drop navigation
  event.stopPropagation();
  event.preventDefault();

  // Other processing to handle certain file types

  return false;
};

$(document).on('dragenter dragover dragleave drop', globalDnd);

https://jsfiddle.net/mcoe6e9d/

创建一个小提示来显示问题。调整预览窗格的大小，直到出现滚动条，然后在栏上拖放文件。该页面将导航。如果您将其放在预览窗格上的任何其他位置，它就不会。