在HTML中，不使用JS阻止图像可拖动或可选择的方法

介绍

在HTML中，图像元素可以非常简单地插入到网页中，但有时我们需要控制图片的行为，例如不允许用户拖动或选择该图像，以确保图像的版权或保护网页内容的完整性。本文将探讨如何在HTML中实现这一目标。

使用CSS禁止图片拖动和选择

禁止图片拖动

要禁止图片拖动，我们可以使用CSS user-drag 属性。将其值设置为 none，即可阻止图像被拖动。

img {

  -webkit-user-drag: none; /* Safari */
  -khtml-user-drag: none; /* Konqueror */
  -moz-user-drag: none; /* Firefox */
  -o-user-drag: none; /* Opera */
  user-drag: none;
}

以上代码可适用于主流的现代浏览器。

禁止图片选择

要阻止用户选择图像，我们需要用到CSS user-select属性。将其值设置为 none，即可阻止图像被选中。

img {

  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -o-user-select: none; /* Opera */
  user-select: none;
}

同样，以上代码可适用于主流的现代浏览器。

使用JS阻止图片拖动和选择

如果需要兼容旧版的浏览器，或者需要更多的控制，我们可以使用JavaScript来实现禁止图像拖动和选择。

禁止图像拖动

要阻止图像拖动，我们需要在图像元素的 ondragstart 事件中返回 false。这会阻止拖动行为。

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

禁止图像选择

要阻止图像选择，我们可以像下面这样覆盖默认的鼠标按下事件，以防止浏览器选中图像。

const imgs = document.getElementsByTagName('img');

for (let i = 0; i < imgs.length; i++) {
  imgs[i].onmousedown = function(event) {
    event.preventDefault();
  };
}

以上代码将鼠标按下事件的默认行为设置为空，从而避免了图像被选中。

结论

以上是在HTML中阻止图像拖动或选择的几种方法。我们可以使用CSS或JavaScript来实现这个目标，具体方法取决于我们需要的控制程度。我们可以根据自己的需要来选择最合适的方法。