zoukankan      html  css  js  c++  java
  • 图片拖拽选中文字的处理方法

    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>
  • 相关阅读:
    C#综合揭秘——细说多线程(上)
    Tinyxml2学习
    GNSS数据下载网站整理,包括gamit、bernese更新文件地址[2020.04更新]
    c#中xml增删查改
    C#比较两个对象中的指定字段值是否相等
    C#数据导出帮助类
    ajax文件下载
    C#中使用NPOI进行DataTable和Excel互转
    使用 ICSharpCode.SharpZipLib.Zip压缩解压文件
    C#DataTable转List<T>互转
  • 原文地址:https://www.cnblogs.com/52css/p/2995897.html
Copyright © 2011-2022 走看看