QQ面板拖拽(慕课网DOM事件探秘)(上)

2017-09-13 20:37:25来源:cnblogs.com作者:喵嘻嘻人点击

分享

QQ面板拖拽,效果如图

JavaScript代码如下:

function getByClass(clsName, parent) {    var oParent = parent ? document.getElementById(parent) : document,        eles = [],        elements = oParent.getElementsByTagName('*');    for (var i = 0, l = elements.length; i < l; i++) {        if (elements[i].className == clsName) {            eles.push(elements[i]);        }    }    return eles;}window.onload = drag;function drag() {    var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];    //拖页    oTitle.onmousedown = fnDown;    //关闭页面    var close = document.getElementById("ui_boxyClose");    close.onclick = winClose;    //切换状态    var loginState = document.getElementById("loginState");    var stateList = document.getElementById("loginStatePanel");    var lis = stateList.getElementsByTagName("li");    var stateTxt = document.getElementById("login2qq_state_txt");    var loginStateShow = document.getElementById("loginStateShow");    //点击显示下拉单    loginState.onclick = function (e) {        stateList.style.display = "block";        //阻止事件冒泡;        e = event || window.event;        if(e.stopPropagation){            e.stopPropagation();        }else{            e.cancelBubble = true;        }    };    //鼠标滑过,背景变色    for (var i = 0; i < lis.length; i++) {        lis[i].onmouseover = function () {            this.style.backgroundColor = "#888";        };        lis[i].onmouseout = function () {            this.style.backgroundColor = "#fff";        };        //鼠标点击,txt改变,图标改变        lis[i].onclick = function (e) {            stateList.style.display = "none";            //阻止事件冒泡            e = event || window.event;            if(typeof e.stopPropagation){                e.stopPropagation();            }else {                e.cancelBubble = true;            }            var id = this.id;            loginStateShow.className = "login-state-show "+id;            var text = getByClass("stateSelect_text",id)[0].innerHTML;            stateTxt.innerHTML = text;        }    }    document.onclick = function () {        stateList.style.display = "none";    }}function winClose() {    var box = document.getElementById("loginPanel");    box.style.display = "none";}function fnDown(event) {    var event = event || window.event;    var oDrag = document.getElementById("loginPanel");    //光标按下时光标和面板之间的距离;    var disX = event.clientX - oDrag.offsetLeft;    var disY = event.clientY - oDrag.offsetTop;    //移动    document.onmousemove = function (event) {        event = event || window.event;        fnMove(event, disX, disY);    };    document.onmouseup = function () {        document.onmousemove = null;        document.onmouseup = null;    }}function fnMove(event, posX, posY) {    var oDrag = document.getElementById("loginPanel");    var l = event.clientX - posX;    var t = event.clientY - posY;    var winW = document.documentElement.clientWidth;    var winH = document.documentElement.clientHeight;    var maxW = winW - oDrag.offsetWidth - 10;    var maxH = winH - oDrag.offsetHeight;    //当l=0时,窗口不能继续外移    if (l < 0) {        l = 0;    } else if (l > maxW) {        l = maxW;    }    if (t < 10) {        t = 10;    } else if (t > maxH) {        t = maxH;    }    oDrag.style.left = l + "px";    oDrag.style.top = t + "px";}

要点:

 

1.阻止事件冒泡

 

loginState.onclick点击事件冒泡,导致下拉列表无法点开

 

loginState.onclick = function () {

    stateList.style.display = "block";

}

document.onclick = function () {

        stateList.style.display = "none";

}

lis[i].onclick列表项的点击事件冒泡,导致下拉列表无法隐藏

 

lis[i].onclick = function () {

    stateList.style.display = "none";

}

loginState.onclick = function () {

    stateList.style.display = "block";

}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台