JS獲取鼠標點擊坐標五種方式及兼容性打賞

關于js鼠標事件綜合各大瀏覽器能獲取到坐標的屬性總共以下五種

event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y

clientX/Y:

clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離,不隨頁面滾動而改變

兼容性:所有瀏覽器均支持

pageX/Y:

pageX/Y獲取到的是觸發點相對文檔區域左上角距離,會隨著頁面滾動而改變

兼容性:除IE6/7/8不支持外,其余瀏覽器均支持

offsetX/Y:

offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離,不過左上角基準點在不同瀏覽器中有區別,其中在IE中以內容區左上角為基準點不包括邊框,如果觸發點在邊框上會返回負值,而chrome中以邊框左上角為基準點。

兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持

layerX/Y:

layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離,數值與offsetX/Y相同,這個變量就是firefox用來替代offsetX/Y的,基準點為邊框左上角,但是有個條件就是,被觸發的dom需要設置為position:relative或者position:absolute,否則會返回相對html文檔區域左上角的距離

兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離,不隨頁面滾動而改變

兼容性:所有瀏覽器均支持

以上內容收集自網絡

日常工作中,常用到offsetX,下面提供兩個據說比較靠譜的獲取方案,兼容多瀏覽器,歡迎指正。

方案一(在使用,獲取的是在當前頁面內的全局坐標,若需要使用相對父級容器的坐標,可以使用jQuery的offset或者原生js等方式獲取元素坐標,進一步計算,鼠標相對元素的相對坐標):

    var getPosition = function(event) {
        var e = event || window.event;
        return {
            x: e.pageX || e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft,
            y: e.pageY || e.clientY + document.documentElement.scrollTop || document.body.scrollTop
        };
    };

原生js獲取元素所在坐標,用于計算鼠標在元素內的相對坐標

    var getElPosition = function(el){
            var t = el.offsetTop,
                l = el.offsetLeft;
            while( el = el.offsetParent){
                t += el.offsetTop;
                l += el.offsetLeft;
            }
            return {
                x : l ,
                y : t
            };
    };

方案二(獲取相對父級容器的坐標,但是這個方法在IE11模擬的IE8下好像有點問題,推薦采用第一種方案進行改進):

    var getPosition = function(event){
        var evt =event||window.event;
        var srcObj = evt.target || evt.srcElement;
        if (evt.offsetX){
            return {
                x:evt.offsetX,
                y:evt.offsetY
            };
        }else{
            var rect = srcObj.getBoundingClientRect();
            return {
                x:evt.clientX - rect.left,
                y:evt.clientY - rect.top
            }
        }
    };
JS獲取鼠標點擊坐標五種方式及兼容性
文章《JS獲取鼠標點擊坐標五種方式及兼容性》二維碼
  • 微信打賞
  • 支付寶打賞

已有4條評論

  1. 夏日博客

    JS忘記得差不多了。

    2015-10-09 16:51 回復
  2. 美女小護士

    強大哦

    2015-09-29 21:59 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖