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

Live Demo

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

如何在HTML页面中获取鼠标单击位置

4 个答案: