javascript - 如何获取鼠标在 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;
}

Live Demo