獲取鼠標和元素的坐標點
阿新 • • 發佈:2018-01-09
cti 計算 .html img body .com spa java com
omain.onclick = function(e) {
var eve = e || window.event;
var x = eve.clientX, // 鼠標指針相對客戶端(即瀏覽器文檔區域)的水平坐標。
y = eve.clientY, // 鼠標指針相對客戶端(即瀏覽器文檔區域)的垂直坐標。
x1 = eve.screenX, // 鼠標指針相對計算機屏幕的水平坐標。
y1 = eve.screenY; // 鼠標指針相對計算機屏幕的垂直坐標。
console.log(x, y);
console.log(x1, y1);
}
HTML:
<div id="main">獲取坐標</div> <div id="fixed_box"></div>
1,jquery 獲取鼠標坐標點
a ,獲取當前鼠標相對html頁面的原點的坐標 $("#main").click(function(e) { var pageX = e.pageX; var pageY = e.pageY; console.log(pageX, pageY) }) b ,獲取當前鼠標相對img元素的坐標 $("#main").click(function(e) { var positionX = e.pageX - $(this).offset().left; //獲取當前鼠標相對img的X坐標 var positionY = e.pageY - $(this).offset().top; //獲取當前鼠標相對img的Y坐標 console.log(positionX + ‘ ‘ + positionY); }) c, 獲取當前鼠標相對瀏覽器的原點的坐標 $("#main").click(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.layerY || 0; console.log(xx + ‘ ‘ + yy); }) 2,javascript 獲取元素的坐標獲取鼠標和元素的坐標點