只是那个人 发表于 2024-3-18 11:10:23

关于赋值调用的作用域问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
      }
    </style>
</head>

<body>
    <div></div>
    <script>
      var div = document.querySelector("div");
      var startY = 0;
      var startX = 0;
      var X = 0;
      var Y = 0;
      div.addEventListener("touchstart", function (e) {
      startX = e.targetTouches.pageX;
      startY = e.targetTouches.pageY;
      X = this.offsetLeft;
      Y = this.offsetTop;
      });
      console.log(startX);
      console.log(startY);
      console.log(X);
      console.log(Y);
      
      div.addEventListener("touchmove", function (e) {
      var moveX = e.targetTouches.pageX - startX;
      var moveY = e.targetTouches.pageY - startY;
      this.style.left = X + moveX + "px";
      this.style.top = Y + moveY + "px";
      });
    </script>
</body>
</html>

以上代码为什么我在touchstart事件外打印是无法获得touchstart事件内的赋值
      console.log(startX);
      console.log(startY);
      console.log(X);
      console.log(Y);
而在touchmove事件中却能获得它们的值？

FishC 发表于 2024-3-18 11:10:47

在JavaScript中，变量的作用域是由其声明的位置决定的。在你的代码中，你在touchstart事件的处理函数内部声明了startX、startY、X和Y这四个变量：

div.addEventListener("touchstart", function (e) {
startX = e.targetTouches.pageX;
startY = e.targetTouches.pageY;
X = this.offsetLeft;
Y = this.offsetTop;
});

而在touchmove事件的处理函数中，你没有重新声明这些变量，只是直接使用了它们：

div.addEventListener("touchmove", function (e) {
var moveX = e.targetTouches.pageX - startX;
var moveY = e.targetTouches.pageY - startY;
this.style.left = X + moveX + "px";
this.style.top = Y + moveY + "px";
});

由于JavaScript采用了词法作用域，所以在touchmove事件的处理函数中能够访问到touchstart事件的处理函数内部声明的变量。但是在touchstart事件外部的代码中，无法访问到touchstart事件的处理函数内部声明的变量，因为它们的作用域仅限于touchstart事件的处理函数内部。

如果你想在touchstart事件外部访问这些变量的值，可以将它们声明在touchstart事件外部，然后在touchstart事件内部赋值给它们。这样你就可以在touchstart事件外部访问到它们的值了。

var startX = 0;
var startY = 0;
var X = 0;
var Y = 0;

div.addEventListener("touchstart", function (e) {
startX = e.targetTouches.pageX;
startY = e.targetTouches.pageY;
X = this.offsetLeft;
Y = this.offsetTop;
});

console.log(startX);
console.log(startY);
console.log(X);
console.log(Y);

div.addEventListener("touchmove", function (e) {
var moveX = e.targetTouches.pageX - startX;
var moveY = e.targetTouches.pageY - startY;
this.style.left = X + moveX + "px";
this.style.top = Y + moveY + "px";
});

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人 发表于 2024-3-18 11:17:51

FishC 发表于 2024-3-18 11:10
在JavaScript中，变量的作用域是由其声明的位置决定的。在你的代码中，你在touchstart事件的处理函数内部声 ...

如何在touchstart事件外部访问这些变量的值，然后在touchstart事件内部赋值给它们。在touchstart事件外部访问到它们的值？

FishC 发表于 2024-3-18 11:18:04

只是那个人 发表于 2024-03-18 11:17
如何在touchstart事件外部访问这些变量的值，然后在to ...

要在touchstart事件外部访问这些变量，在声明变量时就要确保它们在全局作用域中。以下是一种方法：

var startX = 0;
var startY = 0;
var X = 0;
var Y = 0;

var div = document.querySelector("div");

div.addEventListener("touchstart", function (e) {
startX = e.targetTouches.pageX;
startY = e.targetTouches.pageY;
X = this.offsetLeft;
Y = this.offsetTop;
});

// 在touchstart事件外部访问变量的值
console.log(startX);
console.log(startY);
console.log(X);
console.log(Y);

div.addEventListener("touchmove", function (e) {
var moveX = e.targetTouches.pageX - startX;
var moveY = e.targetTouches.pageY - startY;
this.style.left = X + moveX + "px";
this.style.top = Y + moveY + "px";
});

现在你可以在touchstart事件外部访问这些变量的值，并且在touchstart事件内部赋值给它们。注意，将变量声明在全局作用域中可能会带来其他问题，因此应尽量避免过多使用全局变量。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页: [1]
查看完整版本: 关于赋值调用的作用域问题