5

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

4

1 回答 1

0

如果你坚持使用全局变量（我认为这是个坏主意）试试这个。将它们指定为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>
于 2013-08-14T22:14:54.037 回答