是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。
我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
处理dragstart事件并返回false。
其他回答
<img src="myimage.jpg" ondragstart="return false;" />
document.querySelectorAll("*").forEach((elem) => {
elem.setAttribute('draggable', false)
elem.addEventListener('dragstart', (event) => {
event.preventDefault()
})
})
这将禁用对所有元素的拖动。
这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。
您可以设置拖动项目时显示的图像。Chrome测试。
设置拖动图像
使用
onclick = myFunction();
myFunction(e) {
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
或者，正如已经在回答中提到的，如果不能拖动元素根本不是问题，您可以在HTML元素上设置draggable="false"。
当Firefox不欣赏你的draggable属性(当设置为false时)或没有你的用户拖动CSS规则在你的链接/锚或图像元素:
如果你想要保持指针事件不变，你可以使用big guns来处理MDN setDragImage中描述的“从拖动目标(dragstart事件被触发的元素)生成的半透明图像”。简单的使用方法:
if (/(firefox)/i.test(navigator.userAgent)) {
document.querySelector('.my-non-draggable').addEventListener('dragstart',
e => e.preventDefault()
);
// or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}
