【问题标题】：How to update Javascript global var inside a click event function如何在点击事件函数中更新 Javascript 全局变量
【发布时间】：2013-08-17 01:18:15
【问题描述】：

使用 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”事件，它工作正常，但我不希望不断跟踪鼠标移动的开销。

【问题讨论】：

您编写的代码看起来应该可以工作。您是否在单击之前记录了鼠标位置？你在哪里调用 displayCoordinates？
Shenanigans
所有这些都只是假设。我正处于一个项目的设计阶段，并且我预见到几个实例，在这些实例中，让不同的函数共享点击事件数据而不必在事件函数本身内部是理想的。函数内更新的全局变量可以在函数外共享，但这似乎不适用于诸如 this 的事件函数。

标签： javascript global-variables jquery mouseclick-event

【解决方案1】：

如果你坚持使用Global Variables（我认为这是个坏主意）试试这个。将它们指定为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>

【讨论】：