Microsoft边缘块范围问题

Microsoft Edge Block Scope Issue

本文关键字：问题 范围 边缘 Microsoft      更新时间：2023-09-26

以下代码在Chrome和Firefox中运行良好，但在Edge中则不然：

.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 中对此进行测试。

我没有在这里安装 Edge 进行测试，但在 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也是如此。（这省去了您不必以老式的方式进行操作，并在循环中增加闭包。

你可以为它使用闭包。这会将值保留在函数内部。

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>

相关文章：