如何在单击事件函数中更新 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

关于如何让这 2 个全局变量在触发后在函数外部更新的任何建议，或者我只是遇到了 Javascript 的固有设计需求？我可以使用回调队列来促进这一点吗？我可以跟踪“mousemove”事件，它工作正常，但我不希望不断跟踪鼠标移动的开销。

Answer 1

如果您坚持使用全局变量（在我看来是个坏主意），请尝试这个。将它们指定为window.mouseXPos = 0，然后简单地将它们回忆为mouseXPos。然而，在函数加载范围之外分配它们应该使它们成为全局的，使用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>