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>
  • 相关阅读:
    HashMap 统计一个字符串中每个单词出现的次数
    iOS .a静态库的制作及使用
    iOS framework静态库中使用xib和图片资源详解
    iOS 工程套子工程,主工程和framework工程或.a library静态库工程联调
    iOS 最新framework和.a静态库制作及使用全解(含工程套工程,多工程联调)
    iOS9新特性 3DTouch 开发教程全解(含源码)
    iOS GCD NSOperation NSThread等多线程各种举例详解
    Mac Beyond Compare 永久试用
    cocoapods 常见问题
    iOS 常用工具库LFKit功能介绍
  • 原文地址:https://www.cnblogs.com/52css/p/2995897.html
Copyright © 2011-2022 走看看