获取鼠标和元素的坐标点

Posted 2020-10-20 ermao的博客

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 获取元素的坐标

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);

}