Question

HTML：

<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>

JS：

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL (url) {
    location.href = url;
}

window.onload = function () {

    var listElement = document.getElementsByTagName('li');

    for (i=0;i<listElement.length;i++) {
        listElement[i].addEventListener('click',openURL(links[i]))
    }

}

我希望代码以这样的方式工作：当用户单击任一列表元素时，它会打开相应的网站。出于某些原因，我不想使用<a>标记。

代码的逻辑非常简单。首先，创建一个变量，该变量返回文档中所有<li>标记的数组。然后使用＆＃39; for＆＃39;循环，我为数组中的每个<li>标记设置了一个事件监听器。我运行的功能只是打开网站。

不知何故，每当我打开页面时，它都会自动重定向到facebook.com，而不会点击。为什么会这样？

任何帮助将不胜感激，谢谢！

Answer 1

这是因为您的事件处理程序稍后会被调用（通过用户操作），而那时，i并不是您想要的。你必须使用闭包来保持内部。

＆＃13;

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL(link) {
  console.log(link);
};


window.onload = function () {

    var listElement = document.getElementsByTagName('li');

    for (i=0;i<listElement.length;i++) {
        listElement[i].addEventListener('click',(function (i) {
          return function () {
            openURL(links[i]);
          };
        }(i)));
    }

}

＆＃13;

<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>

＆＃13;

Answer 2

当您执行click',openURL(links[i])时，它会调用openUrl。您应该使用.bind(context, params)。另请注意，eventListener的第一个参数是event

此外，window.onload = function被视为不良做法，因为它将覆盖任何先前的侦听器。您应该使用.addEventListener

＆＃13;

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL(event, url) {
  //location.href = url;
  console.log(url)
}

window.addEventListener('load', function() {
  var listElement = document.getElementsByTagName('li');
  for (i = 0; i < listElement.length; i++) {
    listElement[i].addEventListener('click', openURL.bind(null, event, links[i]))
  }
})

＆＃13;

<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>

＆＃13;

添加＆＃39;点击＆＃39;事件监听器使用＆＃39; for＆＃39;环

2 个答案: