QQ面板拖拽（慕课网DOM事件探秘）（上）

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";

}