マウスのxとyの位置を画面に表示しようとしています - 0,

Question

ユーザーがウェブサイトのどこかをクリックすると、マウスのxとyの位置を登録して印刷します。

問題：毎回0、0の位置が印刷されます。この機能は、クリックイベントハンドラ

function onClickDo(event) { 

var el = event.CurrentTarget; 
var posOb = getPosition(el); 

for (var key in posOb) { 
     console.log(key); 
     } 
    alert(posOb.x + " x pos"); 
    alert(posOb.y+ " y pos"); 
    alert(posOb.a+ " random string"); 

} 

のonload機能

window.onload = function() { 
    document.onclick = onClickDo(event); 

}; 

上のxとy

// get the position of click 
function getPosition(el) { 
  var xPosition = 0; 
  var yPosition = 0; 
  
  while (el) { 
    if (el.tagName == "BODY") { 
      // deal with browser quirks with body/window/document and page scroll 
      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 
  
      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
    } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
    } 
  
    el = el.offsetParent; 
  } 
  return { 
    x: xPosition, 
    y: yPosition, 
    a: "hahah", 
  }; 
} 

の位置を取得します

ANSWER

// Set up event handlers according to modern standards 
window.addEventListener("load", function(){ 
    document.addEventListener("click", handleClick); 
}); 

function handleClick(event) { 

  var xPosition = 0; 
  var yPosition = 0; 
 var el = event.currentTarget; <----------------------- targeting the element not working 

  while (el) { 
    if (el.nodeName == "BODY") { 
      // deal with browser quirks with body/window/document and page scroll 
      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 
  
      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
    } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
    } 
  
    el = el.offsetParent; 
  } 
//   return { 
//     x: xPosition, 
//     y: yPosition, 
// a: "hahah", 
//   }; 


alert(xPosition + " x pos" + " and " + yPosition + " y pos"); 

} 

に基づく0

UPDATE私は、しかし、私はNaNエラーを取得しています。.. event.currentTargetを使用してelを定義する必要がありました。ちょっとわからない。助けてください！

変更：document.onclick = onClickDo(event);へ：document.onclick = onClickDo;

あなたはイベント処理関数にイベントを渡さない

Answer 1

あなたは、いくつかの構文とプロパティのエラーを持っています。それは自動的に起こります。そして、あなたのコードが書かれている方法で、onClicDoがクリックイベントを待つのではなく、すぐに呼び出されています。

また、event.CurrentTargetは次のようになります。event.currentTargetと el.tagNameは、次のようになります。el.nodeName

ここでは基本的なセットを表示するには非常にスケールダウンしたバージョンです。

// Set up event handlers according to modern standards 
 
window.addEventListener("load", function(){ 
 
    document.addEventListener("click", handleClick); 
 
}); 
 

 
function handleClick(event) { 
 
alert("x:" + event.offsetX + ", y:" + event.offsetY); 
 
}