零散的JavaScript公用方法

        function stopBubble(e) {
            if (e && e.stopPropagation) {//如果傳入了事件物件，那麼就是非IE瀏覽器
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;//使用IE的方式來取消事件冒泡
            }
        }
        function stopDefault(e) {
            if (e && e.preventDefault) {
                e.preventDefault();//防止預設瀏覽器行為（W3C）
            } else {
                window.event.returnValue = false;
            }
            return false;
        }

        function addEvent(element, type, handler) {
            if (!handler.$$guid) {//為每一個事件處理函式賦予一個獨立的ID
                handler.$$guid = addEvent.guid++;
            }
            if (!element.events) {//為元素建立一個事件型別的雜湊表
                element.events = {};
            }
            var handlers = element.events[type];
            if (!handler) {
                handlers = element.events[type] = {};
                if (element["on" + type]) {//儲存已有的事件處理函式（如果已經存在一個）
                    handlers[0] = element["on" + type];
                }
            }
            handlers[handler.$$guid] = handler;//在雜湊表中存在該事件處理函式
            element["on" + type] = handleEvent;
        }
        addEvent.guid = 1;//建立獨立ID的計數器
        function removeEvent(element, type, handler) {//從雜湊表中刪除事件處理函式
            if (element.events && element.events[type]) {
                delete element.events[type][handler.$$guid];
            }
        }
        function handleEvent(event) {
            var returnValue = true;
            event = event || fixEvent(window.event);//獲得事件物件（IE使用全域性的事件物件）
            var handlers = this.events[event.type];//獲得事件處理函式雜湊表的引用
            for (var i in handlers) {//依次執行每個事件處理函式
                this.$$handlerEvent = handlers[i];
                if (this.$$handlerEvent(event) === false) {
                    returnValue = false;
                }
            }
            return returnValue;
        }
        function fixEvent(event) {//增加一些IE事件物件的缺乏的方法
            event.preventDefault = fixEvent.preventDefault;//增加W3C標準事件方法
            event.stopPropagation = fixEvent.stopPropagation;
            return event;
        }
        fixEvent.preventDefault = function () {
            this.returnValue = false;
        }
        fixEvent.stopPropagation = function () {
            this.cancelBubble = true;
        }
        //獲取指定元素elem的樣式屬性
        function getStyle(elem, name) {
            if (elem.style[name]) {//如果屬性存在於style[]中,那麼它已被設定了（並且是當前的）
                return elem.style[name];
            } else {
                if (elem.currentStyle) {//嘗試使用IE的方法
                    return elem.currentStyle[name];
                } else if (document.defaultView && document.defaultView.getComputedStyle) {//或者W3C的方法，如果存在的話
                    //name=name.replace(/([A-Z)/g,"-$1");
                    name = name.toLowerCase();
                    var s = document.defaultView.getComputedStyle(elem, '');//獲取樣式物件並獲取屬性（存在的話）值
                    return s && s.getPropertyValue(name);
                } else {
                    return null;
                }
            }
        }
        //獲取元素的X（水平、左端）位置
        function pageX(elem) {
            return elem.offsetParent ?//檢視我們是否位於根元素
                elem.offsetLeft + pageX(elem.offsetParent) ://如果我們能繼續得到上一個元素，增加當前的偏移量並繼續向上遞迴
                elem.offsetLeft;//否則獲得當前的偏移量
        }
        //獲得元素Y（垂直、頂端）位置
        function pageY(elem) {
            return elem.offsetParent ?//檢視我們是否位於根元素
                elem.offsetTop + pageY(elem.offsetParent) ://如果能繼續得到上一個元素，增加當前的偏移量並繼續向上遞迴
                elem.offsetTop;//否則獲取當前的偏移量
        }
        //獲取元素相對於父親的水平位置
        function parentX(elem) {
            return elem.parentNode == elem.offsetParent ?//如果offsetParent是元素的父親，那麼提前退出
                elem.offsetLeft :
                pageX(elem) - pageX(elem.parentNode);//否則，我們需要找到元素和元素的父親相對於整個頁面位置，並計算他們之前的差
        }
        //獲取元素相對於父親的垂直位置
        function parentY(elem) {
            return elem.parentNode == elem.offsetParent ?//如果offsetParent是元素的父親，那麼提前退出
                elem.offsetTop :
                pageX(elem) - pageY(elem.parentNode);//否則，我們需要找到元素和元素的父親相對於整個頁面位置，並計算他們之前的差
        }
        //恢復css原的屬性值 防止reset css函式副作用的函式
        function restoreCSS(elem, prop) {
            for (var i in prop) {//重置所有屬性，恢復它們的原有值
                elem.style[i] = prop[i];
            }
        }
        //設定CSS一組屬性的函式，它可以恢復到原有設定
        function resetCSS(elem, prop) {
            var old = [];
            for (var i in prop) {
                old[i] = elem.style[i];//記錄舊的屬性值
                elem.style[i] = prop[i];//並設定新的值
            }
            return old;//返回已經變化的值集合，預留給restoreCSS函式使用
        }
        function getHeight(elem) {//獲得元素的真實高度
            return parseInt(getStyle(elem, 'height'));//獲得CSS的最終值並解析出可用的數值
        }
        function getWidth(elem) {//獲得元素的真實寬度
            return parseInt(getStyle(elem, 'width'));//獲得CSS的最終值並解析出可用的數值
        }
        //查詢元素完整的，可能的高度
        function fullHeight(elem) {
            //如果元素是顯示的，那麼使用offsetHeight就能得到高度，如果沒有offsetHeight，則使用getHeight()
            if (getStyle(elem, 'display') != 'none') {
                return elem.offsetHeight || getHeight(elem);
            }
            //處理display為none的元素,所以重置它的css屬性以獲取更精確的讀數
            var old = resetCSS(elem, {
                display: '',
                visibility: 'hidden',
                position: 'absolute'
            });
            var h = elem.clientHeight || getHeight(elem);//使用clientHeihgt找到元素的完整高度，如果還不生效，則使用getHeight函式
            restoreCSS(elem, old);//恢復css原的屬性
            return h;//返回元素的完整高度
        }
        //查詢元素完整的，可能的寬度
        function fullWidth(elem) {
            //如果元素是顯示的，那麼使用offsetWidth就能得到高度，如果沒有offsetHeight，則使用getHeight()
            if (getStyle(elem, 'display') != 'none') {
                return elem.offsetWidth || getWidth(elem);
            }
            //處理display為none的元素,所以重置它的css屬性以獲取更精確的讀數
            var old = resetCSS(elem, {
                display: '',
                visibility: 'hidden',
                position: 'absolute'
            });
            var h = elem.clientWidth || getWidth(elem);//使用clientWidth找到元素的完整高度，如果還不生效，則使用getWidth函式
            restoreCSS(elem, old);//恢復css原的屬性
            return h;//返回元素的完整高度
        }

        function hide(elem) {//隱藏元素
            var curDisplay = getStyle(elem, 'display');//找到元素display的當前狀態
            if (curDisplay != 'none') {//記錄它的display狀態
                elem.$oldDisplay = curDisplay;
            }
            elem.style.display = 'none';//設定display為none  隱藏元素
        }
        function show(elem) {//顯示元素
            elem.style.display = elem.$oldDisplay || '';//設定display屬性為它的原始值，如沒有記錄原始值 則使用block
        }

        function setOpacity(elem, level) {//設定元素透明度 級別從0-100
            if (elem.filters) {//如果存在filters這個屬性 則它是IE  所以設定元素的Alpha濾鏡
                elem.style.filters = "alpha(opacity=" + level + ")";
            } else {
                elem.style.opacity = level / 100;//使用W3C的opacity屬性
            }
        }
        function slideDown(elem) {
            elem.style.height = '0px';//從0高度開始滑動
            show(elem);//先顯示元素（但是看不到它，因為它的高度是0）
            var h = fullHeight(elem);//找到元素的完整的潛在高度
            for (var i = 0; i <= 100; i += 5) {//在一秒鐘內執行一個20幀的動畫
                //保證能夠保持正確的i的閉包函式
                (function () {
                    var pos = i;
                    setTimeout(function () {
                        elem.style.height = ((pos / 100) * h) + 'px';
                    }, (pos + 1) * 10);
                })();
            }
        }
        function fadeIn(elem) {
            setOpacity(elem, 0);//從0透明度開始
            show(elem);//先顯示元素（但是看不到它，因為它的透明度是0）
            for (var i = 0; i <= 100; i += 5) {//在一秒鐘內執行一個20幀的動畫
                //保證能夠保持正確的i的閉包函式
                (function () {
                    var pos = i;
                    setTimeout(function () {
                        setOpacity(elem, pos);
                    }, (pos + 1) * 10);
                })();
            }
        }
        function getX(e) {//獲取游標的水平位置
            e = e || window.event;//標準化事件物件
            return e.pageX || e.clientX + document.body.scrollLeft;//先檢查非IE瀏覽器的位置，再檢查IE的位置
        }
        function getY(e) {//獲取游標的垂直位置
            e = e || window.event;//標準化事件物件
            return e.pageY || e.clientY + document.body.scrollTop;//先檢查非IE瀏覽器的位置，再檢查IE的位置
        }
        function getElementX(e) {//獲得滑鼠相對於當前元素（事件物件e的屬性target）的X位置
            return (e && e.layerX) || window.event.offsetX;//獲得正確的偏移量
        }
        function getElementY(e) {//獲得滑鼠相對於當前元素（事件物件e的屬性target）的Y位置
            return (e && e.layerY) || window.event.offsetY;//獲得正確的偏移量
        }
        function pageHeight() {//返回頁面的高度（增加內容的時候可能會改變）
            return document.body.scrollHeight;
        }
        function pageWidth() {//返回頁面的寬度（增加內容的時候可能會改變）
            return document.body.scrollWidth;
        }
        function scrollX() {//確定瀏覽器水平滾動位置的函式
            var de = document.documentElement;
            return self.pageXOffset ||//如果瀏覽器存在pageXOffset屬性 則使用它
                (de || de.scrollLeft) ||//嘗試獲取根節點的左端滾動的偏移量
                document.body.scrollLeft;//嘗試獲取body元素的左端滾動的偏移量
        }
        function scrollY() {//確定瀏覽器垂直滾動位置的函式
            var de = document.documentElement;
            return self.pageYOffset ||//如果瀏覽器存在pageYOffset屬性 則使用它
                (de || de.scrollTop) ||//嘗試獲取根節點的頂端滾動的偏移量
                document.body.scrollTop;//嘗試獲取body元素的頂端滾動的偏移量
        }
        function windowHeight() {//獲取視口的高度
            var de = document.documentElement;
            return self.innerHeight ||////如果瀏覽器存在innerHeight屬性 則使用它
                (de && de.clientHeight) ||//嘗試獲取根節點的高度偏移量
                document.body.clientHeight;//嘗試獲取body元素的高度偏移量
        }
        function windowWidth() {//獲取視口的寬度
            var de = document.documentElement;
            return self.innerWidth ||////如果瀏覽器存在innerWidth屬性 則使用它
                (de && de.clientWidth) ||//嘗試獲取根節點的高度偏移量
                document.body.clientWidth;//嘗試獲取body元素的高度偏移量
        }