javascript - 更改子局部函数javascript中的全局变量的值

Question

无需解释大部分代码。正如您所看到的，全局变量 cancel 设置为 true。然后调用一个函数，其中变量 cancel 发生变化。 我似乎可以访问第 15、27 或 32 行的 cancel 变量。 你能解释一下原因吗它不起作用，我该如何修复它？谢谢!如有任何其他问题，请询问。我没有在这里解释其他代码，因为我认为它与问题不直接相关，如果我这样做的话，会使这个问题太长而难以阅读。

1. var cancel = 'true';
2. function setSliders()
3. {
4.  var sliders = document.getElementsByClassName('slider');
5.  var sliderButtons = document.getElementsByClassName('sliderButton');
6.  for(var i = 0; i != sliderButtons.length; i++)
7.  {
8.      var slider = document.getElementsByClassName('sliderButton')[i];
9.      slider.onmousedown = function()
10.     {
11.         cancel = 'false';
12.         this.onmouseup = function(cancel)
13.         {
14.             cancel = 'true';
15.             alert(cancel +' within semi function cancel does not seem to be accessible here');
16.             //alert('test');
17.         };
18.         
19.         alert(cancel+' within function');
20.         
21.         this.onmousemove = function(event, cancel)
22.         {
23.             if(cancel == 'false')
24.             {
25.                 console.log('cancel is false'); //cancel doesn't seem to be accessible here either.
26.                 this.style.left = event.clientX+'px';
27.                 cancel = 'true';
28.             }
29.             else
30.             {
31.                 console.log('cancel is true'); //cancel isn't accessible here either.
32.                 cancel = 'false';
33.             }
34.         };
35.     };

Answer 1

您将 cancel 作为函数的参数名称，使这些函数中的 cancel 成为该函数的本地函数。

如果您从参数中删除 cancel，它将引用全局 cancel 变量并且应该可以工作。

1. var cancel = 'true';
2. function setSliders()
3. {
4.  var sliders = document.getElementsByClassName('slider');
5.  var sliderButtons = document.getElementsByClassName('sliderButton');
6.  for(var i = 0; i != sliderButtons.length; i++)
7.  {
8.      var slider = document.getElementsByClassName('sliderButton')[i];
9.      slider.onmousedown = function()
10.     {
11.         cancel = 'false';
12.         this.onmouseup = function()
13.         {
14.             cancel = 'true';
15.             alert(cancel +' within semi function cancel does not seem to be accessible here');
16.             //alert('test');
17.         };
18.         
19.         alert(cancel+' within function');
20.         
21.         this.onmousemove = function(event)
22.         {
23.             if(cancel == 'false')
24.             {
25.                 console.log('cancel is false'); //cancel doesn't seem to be accessible here either.
26.                 this.style.left = event.clientX+'px';
27.                 cancel = 'true';
28.             }
29.             else
30.             {
31.                 console.log('cancel is true'); //cancel isn't accessible here either.
32.                 cancel = 'false';
33.             }
34.         };
35.     };