div拖拽时取消文字选中默认事件的解决方法

时间：2022-12-24 19:30:59

当我们对div进行拖 拽时，会发现把div里的文字也选中了，其实我并不想选中文字 ，怎么解决呢？

我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown； 另外一种是为对象绑定事件addEventListener。

先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capature();

第二，在事件绑定以后，return false 不起作用了。这时我们需要使用oEvent.preventDefault()来解决。低版本IE还是一样。

顺便提一句：事件绑定attachEvent中，不能使用this

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div{ position:absolute; width:200px; height:200px; background:#ccc; color:#000}
</style>
<script>
ready(function(){
	var oDiv=document.getElementById('div');
	drag(oDiv);	
})

//拖拽原理：改变obj的top值与left值
function drag(obj)
{
	addEvent(obj,'mousedown',function(ev){
		var oEvent=ev||event;
		//不变的参考距离＝mousedown时鼠标坐标－obj到页面的左边距
		var disX=oEvent.clientX-obj.offsetLeft;
		var disY=oEvent.clientY-obj.offsetTop;
		addEvent(document,'mousemove',move);
		addEvent(document,'mouseup',up);
		oEvent.preventDefault();//阻止默认事件，取消文字选中
		function move(ev)
		{
        	var oEvent=ev||event;
			var left=oEvent.clientX-disX;
			var top=oEvent.clientY-disY;
			obj.style.left=left+'px';
			obj.style.top=top+'px';
			obj.setCapture&&obj.setCapture();//低版本IE阻止默认事件，取消文字选中
		}
		function up()
		{
			removeEvent(document,'mousemove',move);
			removeEvent(document,'mouseup',up);
			obj.releaseCapture&&obj.releaseCapture();//低版本IE取消阻止默认事件
		}
	})
}
//添加事件绑定
function addEvent(obj,sEv,fn)
{
	if(obj.addEventListener)
	{
		obj.addEventListener(sEv,fn,false);
	}else{
		obj.attachEvent('on'+sEv,fn);
	}
}

//删除事件绑定
function removeEvent(obj,sEv,fnName)
{
	if(obj.removeEventListener)
	{
		obj.removeEventListener(sEv,fnName,false);
	}else{
		obj.detachEvent('on'+sEv,fnName);
	}
}
//代码加载完执行js
function ready(fn)
{
	if(document.addEventListener)
	{
		document.addEventListener('DOMContentLoaded',fn,false)
	}else{
		document.attachEvent('onreadystatechange',function(){
			if(document.readyState=='complete')
			{fn();}
		})
	}
}	
</script>
</head>

<body>
<div id="div">选不中我哦，选不中我的。</div>
</body>
</html>


标签：

相关文章