HTML文档 - 无法阻止对象拖动

Question

我正在开发一个可用于测试的网络应用程序：

  

“http://83.150.87.220/dropbox/HelsinkiViSeZip/Jatkasaari”

主要用于放大图像并平移相同的图像。

加载文档并显示中央图像后，您可以mousedown + drag在该图像上zoom in/out或平移它。

当按下鼠标按钮时，您会注意到图像变得模糊，并且指示符（png图像）出现在光标下方。该指示器显示如何移动光标以选择动作（缩放/平移）。

在Chrome中一切正常，但在FF中，一旦你mousedown第二次在图像上并开始拖动光标，似乎指针（我之前提到的png图像拖拽并乱搞一切。这似乎是在任何浏览器中单击拖动图像的默认行为。但这很奇怪，因为在第一个mousedown+cursor drag组合中，一切正常。更不用说我确保阻止图像的默认操作：

$(document).on('mousedown dragstart', 'img, a.icon', function(event) {  
    event.preventDefault(); 
}); 

我对如何找到问题的想法一直都很干涸，所以我不在乎......有人可以帮忙吗？

提前致谢！

Answer 1

您可以尝试将其设置为div容器或类似内容中的背景图像，只显示/隐藏它而不是使用img元素。这样你就无法用光标实际“选择”图像，但如果它是由javascript驱动的，那么一切都应该可以工作。

Answer 2

我遇到了类似的问题，似乎还需要return false;来阻止浏览器默认行为。

Here is the fiddle