JS拖拽的兼容性问题

最新推荐文章于 2022-11-02 18:15:00 发布

寒江独

最新推荐文章于 2022-11-02 18:15:00 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fandyvon/article/details/88718912

本文介绍了JavaScript拖拽功能存在的兼容性问题，特别是在文字和元素共存时，选中文本后可能无法正确拖拽元素。针对这个问题，提出了两种解决方案：在标准浏览器中使用`return false`阻止默认行为；在非标准浏览器中利用`setCapture`和`releaseCapture`进行事件捕获。文章还提到，这些方法在不同浏览器中的兼容性表现不一，例如IE有效，Firefox和Chrome则存在局限。最后，提到了拖拽图片的类似问题和封装拖拽功能的便利性。

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

JS拖拽的兼容性问题解决

JS拖拽的兼容性问题解决。

在上文我们介绍过JS拖拽的原理及应用。JS中的拖拽还是有兼容性问题。也就是说当页面中有文字也有元素时（比如图片），当我们选中文字时，再点击元素拖拽的话，这个时候是不能拖拽元素的，而相反的会拖拽文字。这是因为选中文字再拖拽，会触发浏览器拖拽文字的默认行为。解决兼容性问题。不同的浏览器不同的解决方法

1、在标准浏览器下，直接使用retrun false语句阻止默认行为。在onmou程序运行结尾的时候阻止。

2、在非标准下，使用setCapture和releaseCapture阻止。使用if语句在onmousedown时阻止。

setCapture 设置全局捕获（和之前的捕获不一样），它的意思是：当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时，就会被当前设置了全局捕获的元素所触发。就算这个事件并不是发生在这个元素身上的，它也可以也可以截获这个事件，然后执行本元素的函数内容。比如说当文字是被选中的状态，就算我们将鼠标放在元素上，这个时候如果要拖拽就应该是拖拽文字了，但是当我们使用setCapture的时候，就会将选中文字的这个行为截获过来，选中的是元素，拖拽的也是元素。 releaseCapture 这表示全局释放，当释放元素的时候，使用if判断释放元素即可。

还是之前的demo，给原demo添加文字，选中后再进行操作。

   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽有文字被选中时</title>
<style>
	#div{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function(){

	var oDiv=document.getElementById('div');

	oDiv.onmousedown=function(ev){

		var ev=ev||event;

		var oLeft=ev.clientX - this.offsetLeft;
		var oTop=ev.clientY - this.offsetTop;

		if ( oDiv.setCapture ) {
			oDiv.setCapture();
		}
	document.onmousemove=function(ev){
		var ev=ev||event;

		oDiv.style.left=ev.clientX-oLeft+'px';

		oDiv.style.top=ev.clientY-oTop+'px';
	}

	document.onmouseup=function(){

		document.onmousemove=document.onmouseup=null;
		if ( oDiv.releaseCapture ) {
				oDiv.releaseCapture();
			}

	}
		return false;
    }
}
</script>
</head>
<body>
	这是一段文字
	<div id="div"></div>
</body>
</html>

  

在线操作

注：这个方法在不同浏览器下也有相应的兼容性问题。总结如下： ie 有，并且有效果火狐：有，但是没有效果 chrome：没有效果拖拽图片有问题，原因和解决办法同上封装拖拽也非常方便，只需要将参数传入即可

   <script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');

	
	drag(oDiv);
	
        //封装，传入参数obj
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				//释放全局捕获 releaseCapture();
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>

  