如何在HTML頁面中獲得鼠標單擊位置

Question

我正在嘗試獲取HTML文件中鼠標單擊的x和y位置。 位置應根據html頁面的大小而定，並且可以在html頁面上的任何位置單擊鼠標。 這怎么可能？

Answer 1

看這個例子：

function handleEvent(e){
 var evt = e ? e:window.event;
 var clickX=0, clickY=0;

 if ((evt.clientX || evt.clientY) &&
     document.body &&
     document.body.scrollLeft!=null) {
  clickX = evt.clientX + document.body.scrollLeft;
  clickY = evt.clientY + document.body.scrollTop;
 }
 if ((evt.clientX || evt.clientY) &&
     document.compatMode=='CSS1Compat' && 
     document.documentElement && 
     document.documentElement.scrollLeft!=null) {
  clickX = evt.clientX + document.documentElement.scrollLeft;
  clickY = evt.clientY + document.documentElement.scrollTop;
 }
 if (evt.pageX || evt.pageY) {
  clickX = evt.pageX;
  clickY = evt.pageY;
 }

 alert (evt.type.toUpperCase() + ' mouse event:'
  +'\n pageX = ' + clickX
  +'\n pageY = ' + clickY 
  +'\n clientX = ' + evt.clientX
  +'\n clientY = '  + evt.clientY 
  +'\n screenX = ' + evt.screenX 
  +'\n screenY = ' + evt.screenY
 )
 return false;
}

現場演示

Answer 2

嘗試這個：

$('div.container').on('click',function(event){
    $('div.result').html("X:"+event.pageX+" Y:"+event.pageY); 
       });

工作小提琴： http : //jsfiddle.net/TY75A/3/

Answer 3

有了這個。

addEventListener('mousedown', foo, false);

    function foo(e) {
        console.log(findPos(this));
    }
    function findPos(obj) {

        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
        }
        return undefined;
    }

Answer 4

嘗試這個 ：

$(document).ready(function() {
    $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});