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

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

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

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

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

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

#div{ position:absolute; width:200px; height:200px; background:#ccc; color:#000}

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();}

})

}

}