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

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>

 

你可能感兴趣的:(中文)