微软边缘区块范围问题

Question

下面的代码工作完全正常的Chrome和Firefox，但不是在边缘：

HTML：

<ul> 
    <li class="listItems">one</li> 
    <li class="listItems">two</li> 
    <li class="listItems">three</li> 
</ul> 

的Javascript：

var listItems = document.querySelectorAll('.listItems'); 
for (let i = 0; i < listItems.length; i++) { 
    let element = listItems[i]; 
    element.addEventListener('click', function() { 
     alert('Clicked on number: ' + i) 
    }); 
} 

当你点击在Chrome/Firefox中分别获得0,1,2的列表项是正确的。在Edge中，您始终获得相同的数字（超过for循环），这表示程序段作用域不起作用。任何想法Edge有什么问题或如何解决这个问题？

您也可以在各自的浏览器中测试jsFiddle。

Answer 1

你可以使用闭包。这将保持函数内部的值。

var listItems = document.querySelectorAll('.listItems'); 
 
for (let i = 0; i < listItems.length; i++) { 
 
    let element = listItems[i]; 
 
    element.addEventListener('click', (v =>() => alert('Clicked on number: ' + v))(i));  
 
}

<ul> 
 
    <li class="listItems">one</li> 
 
    <li class="listItems">two</li> 
 
    <li class="listItems">three</li> 
 
    <li class="listItems">four</li> 
 
    <li class="listItems">five</li> 
 
</ul>

Answer 2

我没有在这里安装与测试优势，但同样的事情发生在IE11。似乎它不会将for()中声明的变量视为块的一部分。

可以 “修复” 它（或解决它）是这样的：

var listItems = document.querySelectorAll('.listItems'); 
 
    for (let i = 0; i < listItems.length; i++) { 
 
     let element = listItems[i]; 
 
     let j = i; // <------ new variable 
 
     element.addEventListener('click', function() { 
 
      alert('Clicked on number: ' + j) 
 
     }); 
 
    }

<ul> 
 
    <li class="listItems">one</li> 
 
    <li class="listItems">two</li> 
 
    <li class="listItems">three</li> 
 
</ul>

也就是说，引入let变量，实际{}块内。 IE11对此非常满意，所以我希望Edge也是如此。 （这样可以节省你不得不在循环中额外关闭的老派方法。）