摘要：一些元素位置設(shè)置的通用方法查找元素的左端位置代碼依賴來自查找元素的頂端位置設(shè)置元素和位置與當(dāng)前位置無關(guān)的一對函數(shù)設(shè)置元素水平的函數(shù)設(shè)置元素垂直位置的函數(shù)在元素的水平位置上增加像素距離的函數(shù)在元素的垂直位置上增加像素距離的函數(shù)代碼來源元素相對

/**
 * 查找元素的左端位置,
 * 代碼依賴：getStyle來自 https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7
 * */

function posX(elem) {
    return parseInt(getStyle(elem, "left"));
}
/**
 * 查找元素的頂端位置
 * */

function posY(elem) {
    return parseInt(getStyle(elem, "top"));
}

/*設(shè)置元素x和y位置(與當(dāng)前位置無關(guān))的一對函數(shù)*/
/**
 * 設(shè)置元素水平的函數(shù)
 * */
function setX(elem, pos) {
    elem.style.left = pos + "px";
}

/**
 * 設(shè)置元素垂直位置的函數(shù)
 * */
function setY(elem, pos) {
    elem.style.top = pos + "px";
}

/**
 * 在元素的水平位置上增加像素距離的函數(shù)
 * */
function addX(elem, pos) {
    setX(posX(elem) + pos);
}
/**
 * 在元素的垂直位置上增加像素距離的函數(shù)
 * */
function addY(elem, pos) {
    setY(posY(elem) + pos);
}

代碼來源：https://gist.github.com/hehongwei44/7f0eca7c0a0ae19adc9f

/**
 * 元素elem相對于父親元素的左端和頂端的位置
 * 依賴腳本:https://gist.github.com/hehongwei44/8d33a6e35ee045722e75
 * */

/**
 * 獲取元素相對于父親元素的水平位置
 * */
function parentX(elem) {
    /**
     * 如果offsetParent是元素的父親,那么提前提出
     * 否則,我們需要找到元素和元素的父親相對于整個頁面位置，并計算他們之間的差
     * */
    return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}

/**
 * 獲取元素相對于父親元素的頂端位置
 *
 * */
function parentY(elem) {
    /**
     * 如果offsetParent是元素的父親,那么提前提出
     * 否則,我們需要找到元素和元素的父親相對于整個頁面位置，并計算他們之間的差
     * */
    return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}

代碼來源：https://gist.github.com/hehongwei44/d8530ae974b1aabbab55

/*元素elem相對于整個文檔的左端和頂端的位置*/

/**
 * 獲取元素的水平位置
 * */
function pageX(elem) {
    /**
     * 參看我們是否位于根元素
     * 如果我們能繼續(xù)得到上一個元素,增加當(dāng)前偏移量并繼續(xù)向下遞歸.
     * 否則,獲取當(dāng)前的偏移量.
     * */
    return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}

/**
 * 獲取元素的頂端位置
 *
 * */
function pageY(elem) {
    /**
     * 參看我們是否位于根元素
     * 如果我們能繼續(xù)得到上一個元素,增加當(dāng)前偏移量并繼續(xù)向下遞歸.
     * 否則,獲取當(dāng)前的偏移量.
     */
    return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}

代碼來源：https://gist.github.com/hehongwei44/8d33a6e35ee045722e75

/**
 *
 * @author Dean Edwards
 * @date 2005/10
 * @link http://dean.edwards.name/weblog/2005/10/add-event/
 * @transform  https://github.com/hehongwei44
 * @compatibility IE6+ ,FF, chrome
 *
 * */

 //調(diào)用方式->addEvent(window, "load", function(){})
function addEvent(element, type, handler) {
    //如果瀏覽器原生支持W3C的標準行為addEventListener函數(shù),則直接綁定函數(shù)句柄.
    if (element.addEventListener) {
        //flase表示不支持事件捕捉,主流瀏覽器都支持該標準,IE9+
        element.addEventListener(type, handler, false);
    } else {
        // 為每一個事件句柄賦值一個獨立的ID,addEvent.guid的初始值為1.
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        // 為元素建立一個事件類型的散列表
        if (!element.events) element.events = {};
        // 為每對元素/事件建立一個事件處理函數(shù)的散列表
        var handlers = element.events[type];

        if (!handlers) {

            handlers = element.events[type] = {};
            // 存儲已有的事件處理函數(shù)(如果已存在一個)，ps:用來特殊處理"on+type"的類型事件.
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        // 在散列表中存儲該事件的處理函數(shù).
        handlers[handler.$$guid] = handler;
        // 賦以一個全局事件處理函數(shù)來處理所有的工作
        element["on" + type] = handleEvent;
    }
}
// 創(chuàng)建獨立ID的計數(shù)器
addEvent.guid = 1;

function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else {
        // 從散列表中刪除事件處理函數(shù)
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    }
}
//事件處理函數(shù)
function handleEvent(event) {
    var returnValue = true;
    // 獲取事件對象(IE使用全局事件對象)
    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
    // 獲取事件處理函數(shù)散列表的引用.
    var handlers = this.events[event.type];
    // 依次執(zhí)行每個事件處理函數(shù)
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        //執(zhí)行回調(diào)函數(shù)
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
}

//重新包裝event對象,使其兼容IE和W3C標準.
function fixEvent(event) {
    // 增加W3C標準事件方法.
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}
//IE瀏覽器阻止默認行為的方式
fixEvent.preventDefault = function () {
    //this指向event對象
    this.returnValue = false;
}
//IE瀏覽器阻止冒泡的方式
fixEvent.stopPropagation = function () {
    //this指向event對象
    this.cancelBubble = true;
};

代碼來源：https://gist.github.com/hehongwei44/3c9ec099751f8f2e197e

/**
 * 阻止事件冒泡的通用函數(shù)
 * */
function stopBubble(e) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
}

/**
 * 防止發(fā)生默認瀏覽器行為的通用函數(shù)
 * */
function stopDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    } else {
        window.event.returnValue = false;
    }
    return false;
}

代碼來源：https://gist.github.com/hehongwei44/5fb2134a70ab8379849e