如何在点击事件函数中更新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的所有代码放在事件函数本身中，否则这两个变量在事件函数之外不会被更新和使用，直到下一个事件发生。例如：

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

...产生：

>>mouseXPos = 0 and mouseYPos = 0

任何关于如何在函数触发后更新这两个全局变量的建议，或者我只是在面对JavaScript的固有设计需求？我能使用回调队列来促进这一点吗？我可以跟踪“mousemove”事件，它可以正常工作，但我不想要不断跟踪鼠标移动带来的开销。

- John Williams

---

你的代码看起来应该可以工作。你可能在点击之前记录了鼠标位置吗？你在哪里调用displayCoordinates函数？ - arghbleargh

Shenanigans - Jason P

这只是假设性的想法。我正在进行一个项目的设计阶段，并且预见到有几种情况下，最好能够使不同的函数共享单击事件数据，而无需在事件函数本身内部。在函数内更新的全局变量可以在函数外共享，但似乎在此类事件函数中并不起作用。 - John Williams

Answer 1

如果你坚持使用 全局变量（在我看来不是一个好主意），可以尝试这样做。将它们赋值为 window.mouseXPos = 0，然后只需简单地调用 mouseXPos。然而，将其赋值在 load 函数范围之外会使它们成为全局变量，使用 window. 可以确保这一点。

请看我的示例：

jsFiddle

JS

<script type="text/javascript">
    window.mouseXPos = 0;
    window.mouseYPos = 0;

    $(function() { // <-- Same as `$(document).ready(function(){`
        $(document).on('click', '#clickable_area', function(e) {
            mouseXPos = e.pageX;
            mouseYPos = e.pageY;
        });
    })
</script>

- SpYk3HH