4

我正在编写一个简单的 chrome 扩展程序，列出所有打开的选项卡，我上面有这段代码

function changeTab(tabID){
  chrome.tabs.update(tabID,{active:false})
}

chrome.windows.getCurrent({populate: true},function (window){
  list = document.getElementById('open-tabs');
  for (var i = 0; i < window.tabs.length; i++)
  {
    var li = document.createElement('li');
    var element = document.createElement('a');
    element.setAttribute('href','#');
    element.innerHTML = window.tabs[i].title;
    element.addEventListener("click",function(){
      changeTab(window.tabs[i].id);
    },false);
    li.appendChild(element);
    list.appendChild(li);
  }
});

它列出了打开的选项卡，但似乎没有添加 onClick 事件，当我检查 chrome 控制台时，我得到了这个

镀铬控制台

为什么没有正确添加事件？

--edit-- 如果有帮助，添加 html

<!doctype html>
<html>
<head>
    <title>Count Me</title>
    <link rel="stylesheet" href="popup.css" type="text/css">
    <script src="popup.js"></script>
</head>
<body>
    <div id="main">
        <ul id="open-tabs"></ul>
    </div>
</body>
</html>

编辑2

我尝试使用答案中给出的建议，.bind(this,i)但仍然无法正常工作，我添加console.log()以查看发生了什么，并且似乎它没有进入addEventListener带有日志调用的代码：

function changeTab(tabID){
  chrome.tabs.update(tabID,{active:false})
}

chrome.windows.getCurrent({populate: true},function (window){
  list = document.getElementById('open-tabs');
  for (var i = 0; i < window.tabs.length; i++)
  {
    var li = document.createElement('li');
    var element = document.createElement('a');
    element.setAttribute('href','#');
    element.innerHTML = window.tabs[i].title;
    console.log('before');
    console.log(window.tabs[i].id);
    element.addEventListener("click",function(iVal){
      console.log('inside');
      changeTab(window.tabs[iVal].id);
    }.bind(this,i),false);
    console.log('after');
    console.log(window.tabs[i].id);
    li.appendChild(element);
    list.appendChild(li);
  }
});

正如你所看到的，我有一个之前和之后console.log()以及里面addEventListener，它似乎没有调用里面的任何东西addEventListener，你可以在这里看到：

镀铬控制台

它正在调用console.log内部addEventListener但仍然无法正常工作

铬控制台 3

4

2 回答 2

5

尝试添加closure around功能

(function(num) {
    element.addEventListener("click",function(){
       changeTab(window.tabs[num].id);
    },false);
})(i)

当您单击该元素时，该事件将在稍后阶段执行。所以当for循环完成时，i总是指向最后一个迭代值。

因此，将其包含在匿名函数中会在变量周围创建一个闭包，该闭包将在单击事件发生时可用。

于 2013-05-22T00:31:23.510 回答
2

您的函数回调发生在无法识别 i.. 的上下文中。您可以将 i 值绑定到函数并使其工作：

element.addEventListener("click",function(iVal){
      changeTab(window.tabs[iVal].id);
    }.bind(this,i),false);
于 2013-05-22T00:45:46.903 回答