禁止网页中的图片或文本被选中

背景

由于我最近在开发一个互动小游戏，碰到一个情况必须要用img标签来实现，平时我都是用div再给它背景的方式实现的。（为什么小游戏还要用dom？用游戏引擎不行吗？我太菜了，不会游戏引擎，只能用原生js和jQuery实现了，反正我接触到的游戏都不是很复杂，用css实现一些动效还挺简单的）。

其实我一开始就是用img来添加物品到场景中的，后来测试发现图片会被选中，并且某些浏览器甚至会打开新页面，当时我为了避开这个问题，改成了div+背景的方式，现在我遇到了麻烦，只能用img才能简单点。所以我就上网找如何解决这样的问题。

// jquery
$(document.body).on('mousedown', e => {
	e.preventDefault()
})

同时，这个也是最简单的解决办法，可以禁止所有的图片、文字选中和元素的拖动，对于我制作的小游戏都十分友好。如果需要更加精细的控制，可以修改document.body为其他的选择器即可。

如果只是想禁止选中效果，而保留拖拽等其他效果，也是可以的。只需添加一些css代码即可。

/* 禁止所有的img被选中, 文本也是一样 */
img {
	user-select: none;
}

网页的图片默认是可以被拖拽的，这里依然推荐最粗暴的阻止mousedown的默认行为。

来源：CSDN

作者：帅气小军二代

链接：https://blog.csdn.net/qq_39730030/article/details/104261570

标签