HTML 中不借助 JS 阻止图像可拖动与可选择的方法

在网页设计中，有时我们需要阻止图像被随意拖动或选择，以提升用户体验或保护版权。通常大家会想到使用 JavaScript 来实现这一功能，但其实在 HTML 中，不借助 JS 也能达成目的。

对于阻止图像可拖动，一种有效的方法是利用 CSS 的 user-drag 属性。在 CSS 样式表中，针对需要设置的图像元素，添加 user-drag: none; 样式声明。例如：

img {
    user-drag: none;
}

这样，页面中的所有图像都无法被鼠标拖动了。不过需要注意的是，user-drag 并非所有浏览器都支持，兼容性方面略有不足。此时，还可以使用 pointer-events: none; 样式来阻止图像被拖动。当设置该样式后，图像将不再响应鼠标事件，自然也就无法拖动。示例代码如下：

img {
    pointer-events: none;
}

不过这种方法也有缺点，那就是图像的所有鼠标交互行为都会被禁止，比如鼠标悬停效果等也会失效。

再来看看阻止图像可选择。我们可以通过设置 user-select 属性来实现。在 CSS 中，对图像元素添加 user-select: none; 样式，就能防止用户用鼠标选择图像内容。代码如下：

img {
    user-select: none;
}

该属性在主流浏览器中都有较好的支持，兼容性相对不错。

另外，还可以将图像放在一个 div 容器中，并对容器设置 user-select: none;。例如：

<div style="user-select: none;">
    <img src="your-image-url.jpg" alt="example">
</div>

这样也能达到阻止图像被选择的效果，同时还能保持图像的其他交互特性。

通过上述这些不借助 JavaScript 的方法，我们能在 HTML 层面有效地阻止图像被拖动和选择，为网页设计带来更多便利，并且在一定程度上能更好地保护页面资源。在实际应用中，可以根据项目需求和浏览器兼容性要求，灵活选择合适的方法。