javascript - クリックイベント関数内でJavascriptグローバル変数を更新する方法

Question

Javascript と jQuery を使用して、クリック イベントのマウス座標を取得して、他の Javascript 関数で使用しようとしています。私の問題は、イベント関数内で設定されたグローバル変数が、他の関数内のグローバル変数のように、関数の外部で更新されないように見えることです。たとえば、次のグローバル変数宣言とイベント関数を使用して、ID "clickable_area" の div でマウス座標を追跡するとします。

var mouseXPos = 0;
var mouseYPos = 0;
$(document).ready(function(){
  $("#clickable_area").click(function(e){
    mouseXPos = e.pageX;
    mouseYPos = e.pageY;
  });
});

... mouseXPos と mouseYPos を処理するすべてのコードをイベント関数自体に配置しない限り、これら 2 つの変数は更新されず、次のイベントの後までイベント関数の外部で使用できません。例えば：

function displayCoordinates() {
console.log("mouseXPos = " + mouseXPos + " and mouseYPos = " + mouseYPos);
}

...収量:

>>mouseXPos = 0 and mouseYPos = 0

これらの 2 つのグローバル変数がトリガーされたときに関数の外部で更新する方法についての提案はありますか、それとも Javascript の固有の設計要求に直面しているだけですか? これを容易にするためにコールバック キューを使用できますか? 代わりに「mousemove」イベントを追跡でき、問題なく動作しますが、マウスの動きを常に追跡するオーバーヘッドは望ましくありません。