Chrome中拖动图像时mouseup事件无法触发

Question

我找到了几个类似的问题，但都与按钮有关。这有点不同。在下面的示例中，当我在非图像元素上进行 mousedown 后，会获得 mouseup 事件。然而，当我在图像元素上进行 mousedown 时，从未收到事件。

$(document).on('mousedown','.draggable', function() {
  console.log("Clicked " + $(this).data('type'));
});

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

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" data-type="image" src="https://imgur.com/xTFOquF.png">
<div class="draggable il" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

我如何在图片上进行mousedown事件后获得mouseup事件？

- user736893

Answer 1

不要使用 mouseup，而是使用为此目的而构建的html拖放（drag and drop）。 您的所有可拖动元素都必须设置draggable=true，并且您需要在dragover和drop事件上防止默认行为。

$(".draggable").on('mousedown', function(e) {
  console.log("Clicked " + $(this).data('type'));
});

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

$(".dropzone").on('dragover', function(e) {
  e.preventDefault();  
});

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" draggable="true" data-type="image" src="https://imgur.com/xTFOquF.png">
<div class="draggable il" draggable="true" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

如果你需要使用mouseup事件，你可以在mousedown事件上使用e.preventDefault()，但这也会阻止浏览器显示拖动。

$(document).on('mousedown','.draggable', function(e) {
  e.preventDefault();
  console.log("Clicked " + $(this).data('type'));
});

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

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" data-type="image" src="https://imgur.com/xTFOquF.png">
<div class="draggable il" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

您可以在图像上设置draggable=false，以获得相同的效果。

- pfg