全局样式里面添加如下class样式,在需要的地方直接添加class就可以了
/*也可以设置成 * 选取全部*/
.no-select {
-webkit-touch-callout: none;
/*系统默认菜单被禁用 iOS Safari*/
-webkit-user-select: none;
/*webkit浏览器 Chrome/Safari/Opera*/
-khtml-user-select: none;
/*早期浏览器 Konqueror*/
-moz-user-select: none;
/*火狐 Firefox*/
-ms-user-select: none;
/*IE10 Internet Explorer/Edge*/
user-select: none;
/* Non-prefixed version, currently not supported by any browser */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.no-select {
-webkit-touch-callout: none;
/*系统默认菜单被禁用 iOS Safari*/
-webkit-user-select: none;
/*webkit浏览器 Chrome/Safari/Opera*/
-khtml-user-select: none;
/*早期浏览器 Konqueror*/
-moz-user-select: none;
/*火狐 Firefox*/
-ms-user-select: none;
/*IE10 Internet Explorer/Edge*/
user-select: none;
/* Non-prefixed version, currently not supported by any browser */
}
</style>
</head>
<body>
<p>厉害哈哈哈哈哈哈</p>
<p class="no-select">厉害哈哈哈哈哈哈</p>
<p class="no-select">厉害哈哈哈哈哈哈</p>
<p class="no-select">厉害哈哈哈哈哈哈</p>
<img src="https://himg.bdimg.com/sys/portraitn/item/ee81e69caae5bf85e9a1bde59bba443e" class="no-select" οndragstart="return false">
</body>
</html>
IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性
unselectable=“on”,否则可能不会生效
最新的浏览器如果不是非得兼容一些老的浏览器也可以不加