鼠標參數，事件對象，獲取鼠標在網頁中的座標

1. 事件對象 event

標準瀏覽器 傳遞給響應函數

IE 把 event 事件對象做爲全局對象 window 的一個屬性

 

2. 瀏覽器滾動條高度

標準瀏覽器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop 

Safari 等瀏覽器 使用 window.pageXOffset    window.pageYOffset

沒有 doctype 聲明的頁面 document.body.scrollLeft    document.body.scrollTop

 

3. 獲取鼠標在網頁中的座標 = 鼠標在視窗中的座標 + 瀏覽器滾動條座標

// 鼠標事件參數    兼容性封裝 Test Already.
var kjfMouse = {
    getEvent : function(e){
        return e || window.event;
    },
    
    getTarget : function(e){
        return this.getEvent(e).target || this.getEvent(e).srcElement;
    },
    
    getClientX : function(e){
        return this.getEvent(e).clientX;
    },
    
    getClientY : function(e){
        return this.getEvent(e).clientY;
    },
    
    // 水平滾動條偏移
    getScrollLeft : function(){
        return  document.documentElement.scrollLeft ||    // 火狐 IE9及如下滾動條是HTML的
                window.pageXOffset ||                     // IE10及以上 window.pageXOffset
                document.body.scrollLeft;                 // chrome 滾動條是body的
    },
    
    // 垂直滾動條偏移
    getScrollTop : function(){
        return  document.documentElement.scrollTop ||    // 火狐 IE9 及如下滾動條是 HTML 的
                window.pageYOffset ||                    // IE10 及以上 window.pageXOffset
                document.body.scrollTop;                 // chrome 滾動條是body的
    },
    
    getPageX : function(e){
        return (this.getEvent(e).pageX)?( this.getEvent(e).pageX ):( this.getClientX(e)+this.getScrollLeft() );
    },
    
    getPageY : function(e){
        return (this.getEvent(e).pageY)?( this.getEvent(e).pageY ):( this.getClientY(e)+this.getScrollTop() );
    }
};