圖解Js event對象offsetX, clientX, pageX, screenX, layerX, x區別

轉：https://www.cnblogs.com/jiangxiaobo/p/6593584.html

 

圖解 event.offsetX，event.clientX，event.pageX，event.screenX屬性

圖解 event.layerX，event.layerY 屬性

圖解 event.x，event.y 屬性

Jquery 兼容寫法

jQuery event 事件對象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等屬性（firefox 瀏覽器中， offsetX 為 undefined）。firefox 獲取 offsetX / offsetY 的值，需要通過 event 對象的屬性 originalEvent。

$(function(){  
    $("#box").mousedown(function(event){  
        console.log(event.offsetX, event.offsetY);  
        console.log(event.clientX, event.clientY);  
        console.log(event.pageX, event.pageY);  
        console.log(event.screenX, event.screenY);  
  
        /* firefox */  
        console.log(event.originalEvent.layerX, event.originalEvent.layerY);  
    });  
});