Chrome中拖拽图片时mouseup事件无法触发的问题咨询

我之前也踩过这个坑！核心原因是浏览器对图片元素默认启用了拖拽（Drag）行为：当你按住图片触发mousedown后，浏览器的拖拽事件机制会接管后续的事件流，导致原本应该触发在.dropzone上的mouseup事件被拦截，根本传不到目标元素上。而非图片元素默认没有这个拖拽行为，所以事件流转是完全正常的。

给你两个可行的解决方案：

方案一：在mousedown事件中阻止默认行为 #

直接在.draggable的mousedown回调里调用e.preventDefault()，禁用浏览器的默认拖拽行为，这样mouseup事件就能正常流转到.dropzone了：

$(document).on('mousedown','.draggable', function(e) {
  // 阻止图片的默认拖拽行为，让mouseup事件正常触发
  e.preventDefault();
  console.log("Clicked " + $(this).data('type'));
});

$(document).on('mouseup','.dropzone', function(e) {
  console.log("Dropped");
});

方案二：给图片添加draggable="false"属性 #

直接在图片标签上禁用拖拽功能，从根源上避免浏览器触发拖拽事件：

<img class="draggable" data-type="image" src="your-image-path.jpg" draggable="false">

这两种方法都能解决问题，你可以根据场景选择：如果只是临时阻止这次mousedown后的拖拽，用方案一；如果图片本来就不需要拖拽功能，方案二更彻底。

内容的提问来源于stack exchange，提问作者user736893