问答详情
源自:4-3 [DOM事件] QQ面板状态切换效果

onmouseup不起作用

function getClass(clsName,parent){
    var oParent=parent?document.getElementById(parent):document,
        eles=[],
        ele=oParent.getElementsByTagName('*');
        for (var i = 0,len=ele.length; i<1; i++) {
            if (ele[i].className===clsName) {
                eles.push(ele[i]);
            }
        }
        return eles;
}

window.onload=drag;

function drag(){
    var close=getClass('close','ding')[0];//返回的是数组,所以一定要加后缀
    var area=document.getElementById('webqq');//移动区域
    var name=document.getElementById('need');//账号框处理
    var state=document.getElementById('state');
    var    shows=document.getElementById('shows');
    var txt=document.getElementById('txt');
    var    panel=document.getElementById('panel');
    var    lis=panel.getElementsByTagName('li');
    close.onclick=unShow; //关闭qq面板
    area.onclick=fnDown; //确定鼠标位置与面板边框的距离
    name['onfocus']=hiddenTxt;  //账号框处理
    name['onblur']=showTxt;   //账号框处理

    //状态列表下拉
    state.onclick=function(e){
        e=e||window.event;
        showList(e);
    }
    //列表项样式设计,包括划过 划出和点击,其中点击主要是用来变换状态用的
    for(var i=0,len=lis.length;i<len;i++){
        lis[i].onmouseover=function(){
            this.style.background='#567';
        }
        lis[i].onmouseout=function(){
            this.style.background='#fff';
        }
        lis[i].onclick=function(e){
            e=e||window.event;
            //一定要阻止事件冒泡,firstly
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble=true;
            }
            var id=this.id;
            var L=document.getElementById(id),
                cTxt=L.getElementsByTagName('div')[0].innerHTML;
            panel.style.display='none';
            txt.innerHTML=cTxt;
            shows.className='';
            shows.className='logo-state-show '+id;
        }
    }
    document.onclick=function(){
        panel.style.display='none';
    }
}
//关闭QQ面板
function unShow(){
        document.getElementById('box').style.display='none';
}

//账号栏设计
function hiddenTxt(){
        if (this.value=='QQ号码或E-Mail') {
            this.value='';
        }
    }
function showTxt(){
        if (this.value=='') {
            this.value='QQ号码或E-Mail';
        }
}

//下拉表显现
function showList(e){
        e=e||window.event;
        //用于防止事件冒泡,因为上面有点击事件
        if(e.stopropagation){
            e.stopropagation();
        }else{
            e.cancelBubble=true;
        }
        panel.style.display='block';
        state.style.height="300"+"px";
    }

//开始拖动
function fnDown(event){
    event=event||window.event;
    var area=document.getElementById('box'),
        webq=document.getElementById('webqq');
        disX=event.clientX-area.offsetLeft,
        disY=event.clientY-area.offsetTop;
    //鼠标移动
    webq.onmousemove=function(event){
        event=event||window.event;
        fnMove(event,disX,disY);
    }
    //释放鼠标,无效,why?
    webq.onmouseout=function(){
          webq.onmousemove=null;
          webq.onmouseup=null;
  }
    
}

function fnMove(e,posX,posY){
    var area=document.getElementById('box');
    var wid=e.clientX-posX;
    var het=e.clientY-posY;
    
    var Width=document.documentElement.clientWidth||document.body.clientWidth;
    var Height=document.documentElement.clientHeight||document.body.clientHeight;
    var maxWid=Width-area.offsetWidth-10;
    var maxHeight=Height-area.offsetHeight;
    if (wid<=0) {
        wid=0;
    }else if (wid>maxWid) {
        wid=maxWid;
    }
    if (het<0) {
        het=10;
    }else if (het>maxHeight) {
        het=maxHeight-16;
    }
    //一定要有单位“px”,否则下列赋值无效
    area.style.top=het+'px';
    area.style.left=wid+'px';

}

提问者:echoiii 2016-10-20 18:47

个回答

  • MTzl
    2016-10-21 14:29:18

    webq.onmouseout=function(){
              webq.onmousemove=null;
              webq.onmouseup=null;
      }

    因为你没有onmouseup函数

    webq.onmouseout=function(){。。。}     你应该想写  webq.onmouseup=...... 吧