zoukankan      html  css  js  c++  java
  • JS错误记录

    错误总结:

    1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值。

    对于这个还不是很明白。

    2. onmousedown事件的主体是oDiv,不是整个窗口。

    3. if ... else if ...   两个花括号的中间不可以写分号 ; 。

    4. oDiv.style.left = l + 'px';    left 值有px。

    5. 写法错误。  可视窗的宽度:  document.documentElement.clientWidth

    if(l<0)
                {
                    l = 0;
                }
                // if(l>oEvent.clientWidth - oDiv.offsetWidth)
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                {
                    // l = oEvent.clientWidth - oDiv.offsetWidth
    
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                };
    <script>
    
        window.onload = function()
        {
            var oDiv = document.getElementById('div1');
    
            var disX = 0; // 为什么在这里声明, 且声明变量为 0 ?
            var disY = 0;
    
            oDiv.onmousedown = function(ev) 
            // 不是点击整个窗口时拖拽, 是点击div的时候拖拽
            {
                var oEvent = ev || event;
                
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;
    
                //window.onmousemove = function(ev)  // window.onmouseove 和 document.onmousemove 区别?
                document.onmousemove=function (ev)
                {
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX   // 变量表示div位置的值
                    var t = oEvent.clientY - disY
    
                    // 画图,分成 左边顶格, 右边顶格 两种情况考虑。
                    if(l<0)
                    {
                        l=0;
                    }    //;  // if 和 else if之间的语句不可以写分号 ; 
                    
                    else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
                    {
                        l = document.documentElement.clientWidth - oDiv.offsetWidth;
                    };
    
                    if(t<0)
                    {
                        t=0;
                    }
                    else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
    
                    oDiv.style.left = l + 'px'; // left 值有px
                    oDiv.style.top =  t + 'px';
                };
    
                document.onmouseup=function ()
                {
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
    
                return false; // 阻止默认事件,解决火狐浏览器拖拽空div的bug
            };    
        };
        </script>
        <script>
        window.onload = function()
        {
          var oDiv = document.getElementById('div1');
          var disX = 0;
          var disY = 0;
    
          oDiv.onmousedown = function(ev)
          {
              var oEvent = ev||event;
              
              disX = oEvent.clientX - oDiv.offsetLeft;
              disY = oEvent.clientY - oDiv.offsetTop;
    
              document.onmousemove = function(ev)
              {
                var oEvent = ev||event;
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
    
                if(l<0)
                {
                    l = 0;
                }
                // if(l>oEvent.clientWidth - oDiv.offsetWidth)
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                {
                    // l = oEvent.clientWidth - oDiv.offsetWidth
    
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                };
    
                if(t<0)
                {
                    t = 0;
                }
                else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }
    
                // if(t>oEvent.clientHeight - oDiv.offsetHeight)
                // {
                //     l = oEvent.clientHeight - oDiv.offsetHeight
                // };
    
                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
              };
    
              document.onmouseup = function()
              {
                  document.onmousemove = null;
                  document.onmouseup = null;
              };
    
              return false;
          };
        };
        </script>
  • 相关阅读:
    基于nginx的rtmp的服务器(nginx-rtmp-module)
    基于nginx的HLS简单服务器搭建
    HLS(HTTP Live Streaming)协议之m3u8文件生成方式
    基于live555的一个简单RTSP服务器
    基于webrtc的多人视频会话的demo运行程序
    写给小白的Python之019:面向对象-类方法、静态方法
    写给小白的Python之018:面向对象-私有成员、@property
    写给小白的Python之017:面向对象-封装、继承、多态
    写给小白的Python之016:面向对象-魔法方法
    写给小白的Python之015:面向对象-类和对象
  • 原文地址:https://www.cnblogs.com/carpenterzoe/p/10214067.html
Copyright © 2011-2022 走看看