CSS /JS防止拖鬼图像?

是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。

我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(我也尝试用同样的规则嵌套div内的图像)。谢谢

当前回答

这里有一个比添加空事件侦听器更简单的解决方案。只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。

其他回答

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

<img src="myimage.jpg" ondragstart="return false;" />

将图像作为空div的背景，或在透明元素下。当用户单击要拖动的图像时，他们是在单击一个div。

参见http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

处理dragstart事件并返回false。

非常简单的不要用太多逻辑把事情搞复杂了使用简单的属性draggable并使其为false

<img draggable="false" src="img/magician.jpg" alt="" />

推荐文章