jsFiddle

Question

使用Javascript＆amp; jQuery，我正在尝试获取click事件的鼠标坐标以在其他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

如果你坚持使用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>

如何在单击事件函数中更新Javascript全局变量

1 个答案:

jsFiddle

JS