设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 关于赋值调用的作用域问题
返回列表 发新帖
查看: 103|回复: 3

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

[复制链接]
只是那个人
发表于 2024-3-18 11:10:23 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         position: absolute;
  11.         left: 0;
  12.         width: 100px;
  13.         height: 100px;
  14.         background-color: pink;
  15.       }
  16.     </style>
  17.   </head>

  19.   <body>
  20.     <div></div>
  21.     <script>
  22.       var div = document.querySelector("div");
  23.       var startY = 0;
  24.       var startX = 0;
  25.       var X = 0;
  26.       var Y = 0;
  27.       div.addEventListener("touchstart", function (e) {
  28.         startX = e.targetTouches[0].pageX;
  29.         startY = e.targetTouches[0].pageY;
  30.         X = this.offsetLeft;
  31.         Y = this.offsetTop;
  32.       });
  33.       console.log(startX);
  34.       console.log(startY);
  35.       console.log(X);
  36.       console.log(Y);
  37.       
  38.       div.addEventListener("touchmove", function (e) {
  39.         var moveX = e.targetTouches[0].pageX - startX;
  40.         var moveY = e.targetTouches[0].pageY - startY;
  41.         this.style.left = X + moveX + "px";
  42.         this.style.top = Y + moveY + "px";
  43.       });
  44.     </script>
  45.   </body>
  46. </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事件外部访问这些变量，在声明变量时就要确保它们在全局作用域中。以下是一种方法：

  1. var startX = 0;
  2. var startY = 0;
  3. var X = 0;
  4. var Y = 0;

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

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

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

  21. div.addEventListener("touchmove", function (e) {
  22.   var moveX = e.targetTouches.pageX - startX;
  23.   var moveY = e.targetTouches.pageY - startY;
  24.   this.style.left = X + moveX + "px";
  25.   this.style.top = Y + moveY + "px";
  26. });
复制代码


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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-3-18 11:10:47 | 显示全部楼层
在JavaScript中，变量的作用域是由其声明的位置决定的。在你的代码中，你在touchstart事件的处理函数内部声明了startX、startY、X和Y这四个变量：

  1. div.addEventListener("touchstart", function (e) {
  2.   startX = e.targetTouches.pageX;
  3.   startY = e.targetTouches.pageY;
  4.   X = this.offsetLeft;
  5.   Y = this.offsetTop;
  6. });
复制代码


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

  1. div.addEventListener("touchmove", function (e) {
  2.   var moveX = e.targetTouches.pageX - startX;
  3.   var moveY = e.targetTouches.pageY - startY;
  4.   this.style.left = X + moveX + "px";
  5.   this.style.top = Y + moveY + "px";
  6. });
复制代码


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

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

  1. var startX = 0;
  2. var startY = 0;
  3. var X = 0;
  4. var Y = 0;

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

  13. console.log(startX);
  14. console.log(startY);
  15. console.log(X);
  16. console.log(Y);

  18. div.addEventListener("touchmove", function (e) {
  19.   var moveX = e.targetTouches.pageX - startX;
  20.   var moveY = e.targetTouches.pageY - startY;
  21.   this.style.left = X + moveX + "px";
  22.   this.style.top = Y + moveY + "px";
  23. });
复制代码


以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

只是那个人
 楼主| 发表于 2024-3-18 11:17:51 | 显示全部楼层
FishC 发表于 2024-3-18 11:10
在JavaScript中，变量的作用域是由其声明的位置决定的。在你的代码中，你在touchstart事件的处理函数内部声 ...

如何在touchstart事件外部访问这些变量的值，然后在touchstart事件内部赋值给它们。在touchstart事件外部访问到它们的值？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-3-18 11:18:04 | 显示全部楼层    本楼为最佳答案   
只是那个人 发表于 2024-03-18 11:17
如何在touchstart事件外部访问这些变量的值，然后在to ...


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

  1. var startX = 0;
  2. var startY = 0;
  3. var X = 0;
  4. var Y = 0;

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

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

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

  21. div.addEventListener("touchmove", function (e) {
  22.   var moveX = e.targetTouches.pageX - startX;
  23.   var moveY = e.targetTouches.pageY - startY;
  24.   this.style.left = X + moveX + "px";
  25.   this.style.top = Y + moveY + "px";
  26. });
复制代码


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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 20:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表