javascript - 当 "dragging"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 事件？

Answer 1

不使用 mouseup，而是使用 html drag and drop ，这是为此目的而 build 的。您所有的可拖动元素都必须设置 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来达到同样的效果