图片拖拽选中文字的处理方法

IE9以下浏览器当页面有文字和图片等多个元素的时候，拖拽可能会选中了文字。

 事件捕获：setCapture() 只在IE下才起作用的。作用是把页面所有元素事件都指向当前对象事件。例如：aBtn.setCapture(); 就是把页面所有事件都指向了按钮对象，不管在页面按哪个位置都会触发按钮的函数。

<script>
window.onload=function()
{
    var oBtn=document.getElementById('btn');
    oBtn.onclick=function()
    {
        alert('a');
    };
    oBtn.setCapture();  //不管在浏览器点击哪个位置，都会弹出a
};
</script>

 

释放捕获：releaseCapture()

JS代码：

View Code 
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div');
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function(ev)  
    {
        var oEvent=ev||event;
        disX=oEvent.clientX-oDiv.offsetLeft;  
        disY=oEvent.clientY-oDiv.offsetTop;  
        
        if(oDiv.setCapture)  //兼容IE
        {
            oDiv.onmousemove=mousemove;
            
            oDiv.onmouseup=mouseUp;
            oDiv.setCapture();  
        }
        else  //兼容FireFox Chrome
        {
            document.onmousemove=mousemove;
            
            document.onmouseup= mouseUp;
        }
        
        function mousemove(ev)  
        {
            var oEvent=ev||event;
            var oLeft=oEvent.clientX-disX;  
            var oTop=oEvent.clientY-disY;  
                    
            oDiv.style.left=oLeft+'px';  
            oDiv.style.top=oTop+'px';  
        };
        
        function mouseUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;
            
            if(oDiv.releaseCapture)
            {
                oDiv.releaseCapture();
            }
        }
        
        return false;  //阻止FireFox的默认事件 bug
    };
};
</script>

 

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;background:red;position:absolute;top:0;left:0;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div');
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function(ev)  
    {
        var oEvent=ev||event;
        disX=oEvent.clientX-oDiv.offsetLeft;  
        disY=oEvent.clientY-oDiv.offsetTop;  
        
        if(oDiv.setCapture)  //兼容IE
        {
            oDiv.onmousemove=mousemove;
            
            oDiv.onmouseup=mouseUp;
            oDiv.setCapture();  
        }
        else  //兼容FireFox Chrome
        {
            document.onmousemove=mousemove;
            
            document.onmouseup= mouseUp;
        }
        
        function mousemove(ev)  
        {
            var oEvent=ev||event;
            var oLeft=oEvent.clientX-disX;  
            var oTop=oEvent.clientY-disY;  
                    
            oDiv.style.left=oLeft+'px';  
            oDiv.style.top=oTop+'px';  
        };
        
        function mouseUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;
            
            if(oDiv.releaseCapture)
            {
                oDiv.releaseCapture();
            }
        }
        
        return false;  //阻止FireFox的默认事件 bug
    };
};
</script>
</head>

<body>您付款了法拉克fai<br />
gsdfg sfdgsdfhfadslkf k
<div id="div">
    您付款了法拉克fai<br />
gsdfg sfdgsdfhfadslkf k
</div>
您付款了法拉克fai<br />
gsdfg sfdgsdfhfadslkf k
</body>
</html>

 

posted @ 2013-04-02 17:14  yexingwen  阅读(433)  评论(0)  编辑  收藏  举报