2

我正在尝试在 HTML 文件中获取鼠标单击的 x 和 y 位置。位置应根据html页面的大小，鼠标点击可以在html页面的任何地方进行。这怎么可能？

4

4 回答 4

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

现场演示

于 2013-10-17T04:05:09.133 回答
0

有了这个。

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;
    }
于 2013-10-17T04:07:33.190 回答
0

尝试这个：

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

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

于 2013-10-17T04:02:23.153 回答
0

尝试这个 ：

$(document).ready(function() {
    $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});
于 2013-10-17T04:16:31.557 回答