Question

以下代码在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，即correkt。在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

我没有安装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也是如此。（这样可以省去你必须以老派的方式在循环中使用额外的闭包。）

Microsoft Edge Block范围问题

2 个答案: