CSS中-webkit-user-select:none的用途

最新推荐文章于 2025-02-23 04:12:19 发布

play_xi

最新推荐文章于 2025-02-23 04:12:19 发布

阅读量8.5k

点赞数 2

分类专栏： css 文章标签： css js javascript html

本文链接：https://blog.csdn.net/weixin_42391053/article/details/106153016

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JS实现的拖拽功能，在遇到文字选中导致拖拽bug的问题时，通过应用CSS属性-webkit-user-select:none;解决了拖拽与文字选中之间的冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中-webkit-user-select:none; 的用途（控制页面文字无法选中）

出现了选中文字后无法拖拽盒子的bug

本人用js写当鼠标拖拽让一个盒子位置随鼠标位置改动时，遇到了一个bug

效果图如下：

[img=https://img-bbs.csdn.net/upload/202005/16/1589559788_457317.png][/img]

bug如下：

在这里插入图片描述

bug描述：当鼠标选中文字后，拖动盒子，但是松开时盒子还是跟着动，这样达不到松开盒子不动的目的

废话不多说，直接上代码：

JS代码

<script type="text/javascript">
			var box = document.getElementById('box');
			var tou = document.getElementById('tou');
			var boxX,boxY;
			var mouseX,mouseY;
			tou.addEventListener('mousedown',function(e){
				mouseX = e.pageX - box.offsetLeft;//鼠标距离盒子的位置
				mouseY = e.pageY - box.offsetTop;
				document.onmousemove = move;
				document.addEventListener('mouseup',function(e){
					document.onmousemove = null;
				})
				return false;
			})
			function move(e){
				boxX = e.pageX - mouseX
				boxY = e.pageY - mouseY
				box.style.left = boxX + 'px';
				box.style.top = boxY + 'px';
				console.log(box.offsetLeft)
			}
			aa.onclick = function(){
				box.style.display = 'none';
			}
		</script>

HTML 代码 HTML codes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box{
				position: relative;
				left: 0px;
				top: 0px;
				background: whitesmoke;
				width: 18rem;
				height: 15rem;
				border: 0.15rem solid #ccc;
				box-shadow: 1px 1px 2px #000,-1px -1px 2px #ccc inset;
			}
			#box a{
				color: white;
				font-size: 0.775rem;
				text-decoration: none;
				margin-right: 5px;
			}
			#box p{
				line-height: 0;
				font-size: 0.775rem;
			}
			#box div{
				background: cadetblue;
				margin: 5px;
				color: white;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 20px;
				cursor: move;
				-webkit-user-select:none; --------->用在这里哦
				-moz-user-select:none; ----------->用在这里哦
			}
			#box a:hover{
				color: #FF0000;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id = 'tou'>
				<p id="p">注册信息（可以拖拽）</p>
				<a href="#" id="aa">[关闭]</a>
			</div>
		</div>
		<script>这里是上面的js代码哦</script>
	</body>
</html>