当我们对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();}
})
}
}