CSS 图片不允许鼠标拖动是我们在网页开发中常常需要实现的一个功能,它可以保证图片的版面整洁,同时避免用户意外拖动影响用户体验。
img { pointer-events: none; user-select: none; }
上述代码中,pointer-events: none;
表示图片不响应鼠标事件,同时user-select: none;
可以禁止用户对图片进行选择操作。
CSS 的这种实现方式适用于大部分浏览器,但在一些老旧浏览器中可能会出现兼容性问题。如果需要兼容性更好的方案,可以使用 JavaScript 实现:
const imgs = document.querySelectorAll('img'); imgs.forEach((img) =>{ img.ondragstart = () =>{ return false; }; });
上面代码中的ondragstart
事件可以阻止图片被鼠标拖拽,同样起到了禁止拖动的作用,同时它也兼容了更多的浏览器。
总体来说,我们可以选择上述两种方式中的一种来实现不允许鼠标拖动图片的效果,具体选择哪种方式可以根据实际情况而定。