[已解决]关于赋值调用的作用域问题

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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[0].pageX;
        startY = e.targetTouches[0].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[0].pageX - startX;
        var moveY = e.targetTouches[0].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: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 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册