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

时间：2021-12-07 19:25:20

当我们对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>


标签：

相关文章