html - 如何禁用图像？使其不可点击

Question

如何使img不可点击？我想在上面画点东西，但是当我做mousedown时，mousemove图像会追随我的鼠标。这有可能让它留在原地吗？我知道我可以将它创建为div中的背景，但现在我想在 img 中尝试。谢谢。

由于我的语言，图像使其更清晰： 屏幕

Answer 1

您可能可以通过将其放入您的 css 来解决您的问题：

#myImage {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

编辑（带有OP的评论）：

一个更完整的解决方案是

#myImage {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-user-drag: none;
-khtml-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

（根据我的经验，两者都需要避免糟糕的用户体验）

Answer 2

您可以使用与图像块保持相同位置的另一个 div，您必须将其 z-index 设置为略高于您的图像。例如，

<div id="main">
   <img src="01.jpg" alt="..." />
   <div id="draw">&nbsp;</div>
</div>

你的 CSS：

#main {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

#main img {
  position: absolute;
  bottom: 0;
  z-index: -1;
}

#main #draw {
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: 0;
  z-index: 99;
}