JavaScript 在 event.clientX 上产生错误

Question

我正在构建的程序是一个当鼠标按下时读取鼠标 X 和鼠标 Y 位置的程序。产生错误的代码如下:

function updateLocation(event) {
    setTimeout(function(event){
        var X = event.clientX;
        var Y = event.clientY;
    },300);
}

chrome、opera、firefox 和 Edge 都说“Uncaught TypeError: Cannot read property 'clientX' of undefined(…)” 我不明白的是，即使我复制了 event.clientX 的源代码 来自 w3schools.com，它仍然会产生该错误。我尝试重写代码，尝试仅将 event 传递给 setTimeout() 或仅传递给函数，但没有任何效果。有人可以帮助我吗，这太令人沮丧了。

以下是我尝试过的所有操作的列表:

function updateLocation(event) {
    setTimeout(function(){
        var X = event.clientX;
        var Y = event.clientY;
    },300);
}

<小时/>

function updateLocation() {
    setTimeout(function(event){
        var X = event.clientX;
        var Y = event.clientY;
    },300);
}

<小时/>

function updateLocation(event) {
    alert(event.clientX);
}

<小时/>

function updateLocation(event) {
    setTimeout(function(event){
        var X = event.windowX;
        var Y = event.windowY;
    },300);
}

<小时/>

function updateLocation(event) {
    setTimeout(function(){
        var X = event.windowX;
        var Y = event.windowY;
    },300);
}

<小时/>

function updateLocation() {
    setTimeout(function(event){
        var X = event.windowX;
        var Y = event.windowY;
    },300);
}

Answer 1

setTimeout 回调函数不应该有任何参数，因为当它被触发时不会传递任何参数。这就是为什么它变得未定义。

如果您只是将其从函数中删除，如下所示，它将按您的预期工作。

您可以看一下下面的代码。

function updateLocation(event) {
    setTimeout(function(){
        var X = event.clientX;
        var Y = event.clientY;
      console.log(X + ', ' + Y);
    },300);
}

.container {
  background-color: gray;
  width: 500px;
  height: 500px;
}

<div class="container" onmousedown="updateLocation(event)">Test Div</div>