使图像不可选择

Question

我正在 Dreamweaver CS5 中制作一个网站。我从 Photoshop 导出图像并将它们插入到表格中。当我查看该网站时，所有图像都是可选的（您可以将它们拖到桌面上）。我该如何改变这个？？？我想用 onclick 方法来做到这一点，另外我将如何实现这一点？

<td><img src="images/people_03.png" name="one" width="1000" height="156" id="one" ONCLICK="closeimages();"/></td>

Answer 1

我在解决同样的问题时偶然发现了这个问题，但接受的答案对我来说并不是一个可能的解决方案。

我特别使用了此处找到的信息将以下样式添加到我的正文中的 css 中（这对我在 Firefox、Chrome 和Opera，我无法测试 IE）

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;

不可选择的 html 标签似乎也有帮助，但它显然仅受 IE 和 Opera 支持：

<img src="1.jpg" unselectable="on">

以及 javascript 解决方案，据说可以在 IE 和 webkit 浏览器上工作：

<script>
window.onload = function() {
    document.body.onselectstart = function() {
        return false;
    }
}
</script>

注意。正如 Albert Renshaw 在评论中指出的那样，此方法在 Chrome 中不再有效 > 50.

Answer 2

我会在 CSS 中使用 pointer-events: none;

img {
  pointer-events: none;
}

Answer 3

可靠的纯 CSS 解决方案

将以下 2 个 CSS 属性应用到您的 元素将完全实现您所描述的效果：

pointer-events: none;
user-select: none;

这在所有现代浏览器中都能可靠地工作。

示例：（尝试用光标选择并拖动图像！:D）

img {
  pointer-events: none;
  user-select: none;
}

<img src="https://source.unsplash.com/random/200x200" alt="sample image" />

---

唯一的缺点是 pointer-events: none 会导致 :hover、:active 和其他与指针相关的 CSS 伪类停止工作。

为了解决这个问题，您应该使用

或其他东西作为 的包装器，然后应用 :hover、:active 包装器上的伪类，而不是 本身。

例子：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
/* Don't mind the code above... */

.image-wrapper {
  transition: ease .5s;
}

.image-wrapper:hover {
  transform: scale(1.3)
}

.image {
  pointer-events: none;
  user-select: none;
}

<div class="image-wrapper">
  <img class="image" src="https://source.unsplash.com/random/200x200" alt="sample image" />
</div>

---

如果您也不想或无法更改 HTML 标记，那么您将不得不求助于一些 JavaScript：

imgElement.addEventListener('selectstart', () => false);

Answer 4

我认为最简单的方法是将图像作为每个单元格的 css 背景图像