Question

我正在编写Chrome扩展程序，但是让我的事件监听器正常工作有些困难。

manifset.json

{
  "manifest_version": 2,

  "name": "Test",
  "description": "testing this",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "bookmarks"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Testing</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {
  chrome.bookmarks.getTree(function (stuff){
    traverseBookmarks(stuff[0].children[0].children);
  });
});

  function traverseBookmarks(bookmarkTreeNodes) {
    for(var i=0;i<bookmarkTreeNodes.length;i++) {
      var bookmark = document.createElement('a');

      if(bookmarkTreeNodes[i].url){
        console.log("here mother");
        bookmark.href = bookmarkTreeNodes[i].url;
        bookmark.target = "_blank";
      }
      else{
        bookmark.addEventListener("click", addChildren(bookmarkTreeNodes[i].children), false);
      }
      bookmark.innerHTML = bookmarkTreeNodes[i].title;
      document.body.appendChild(bookmark);
      document.body.appendChild(document.createElement("br"));

      if(bookmarkTreeNodes[i].children) {
        traverseBookmarks(bookmarkTreeNodes[i].children);
      }
    }
  }

  function addChildren(children) {
    var windows = "";
    for(var i = 0; i < children.length; i++){
      window.open(children[i].url);
      // windows += 'window.open(' + children[i].url + ');';
    }
    return windows;
  }

我遇到的问题是，每次点击扩展程序的图标打开弹出窗口时，事件监听器中的第一个链接都会被触发，最终只会打开第一个标签。

目标是能够单击文件夹（现在只是一个符号文件夹的链接）并打开该文件夹中的所有链接。任何帮助表示赞赏。如果我需要澄清任何内容，请告诉我。

Answer 1

bookmark.addEventListener("click", 
                           addChildren(bookmarkTreeNodes[i].children), false);

您正在执行此处的功能

addChildren(bookmarkTreeNodes[i].children)
           ^                             ^
           |                             |

您需要传递参考资料

bookmark.addEventListener("click", addChildren, false);

相反，您可以将处理程序包装在一个闭包中，并将当前值i传递给 IIFE 。

(function(num) {
    bookmark
     .addEventListener("click", function() {               
                                  addChildren(bookmarkTreeNodes[num].children) })
                               } , false );
})(i);

将多个事件侦听器添加到一个链接

1 个答案: