javascript addEventlistener“點擊”不工作

Question

我正在努力將待辦事項列表作為 Chrome 新標簽擴展。

我的 html 文件：

<head>
</head>

<body>
    <h2 id="toc-final">To Do List</h2>
    <ul id="todoItems"></ul>
    <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;">
    <button id="newitem" value="Add Todo Item">Add</button>

    <script type="text/javascript" src="indexdb.js"></script>
</body>
</html>

以前按鈕元素是帶有 onClick() 的輸入類型，但 Chrome 不允許這樣做。 所以我必須制作一個 javascript function ，它會在點擊時觸發。 在我的 indexdb.js 中：

var woosToDo = {};
    window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB;

    woosToDo.indexedDB = {};
    woosToDo.indexedDB.db = null;

    window.addEventListener("DOMContentLoaded", init, false);

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById("newitem").addEventListener("click", addTodo(), false);
    });

...
...

    function addTodo() {
      var todo = document.getElementById("todo");
      woosToDo.indexedDB.addTodo(todo.value);
      todo.value = "";
    }

為什么當我點擊帶有 id="newitem" 的按鈕時沒有任何反應？

Answer 1

附加函數時，您首先執行它，並將undefined的返回值附加到事件。 去掉括號：

.addEventListener("click", addTodo, false);

當您將addTodo()作為參數時，您並沒有傳遞函數本身。 它做的第一件事是執行函數並使用返回值作為參數。

由於沒有return語句的函數隱式導致undefined ，原始代碼實際上是在運行該函數，然后附加：

.addEventListener("click", undefined, false);

Answer 2

對於仍然遇到這個錯誤的人，我的情況是菜單有li > a

<li> <a class="menu-item">Menu item</a></li>

當我將click事件綁定到a時，它不起作用我通過從li監聽click事件並使用e.preventDefault()來修復它

現在可以用了

Answer 3

嘗試使用一個，而不是兩個DOMContentLoaded偵聽器。

改變這個：

window.addEventListener("DOMContentLoaded", init, false);

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById("newitem").addEventListener("click", addTodo(), false);
    });

對此：

window.addEventListener('DOMContentLoaded', function () {
  init();
  document.getElementById("newitem").addEventListener("click", addTodo, false);
});

javascript addEventlistener“點擊”不工作

問題描述

3 個解決方案

解決方案1
11 已采納 2015-11-24 23:47:43

解決方案2
2 2021-09-26 16:35:31

解決方案3
-1 2015-11-25 09:08:37

javascript addEventlistener“點擊”不工作

問題描述

3 個解決方案

解決方案1 11 已采納 2015-11-24 23:47:43

解決方案2 2 2021-09-26 16:35:31

解決方案3 -1 2015-11-25 09:08:37

解決方案1
11 已采納 2015-11-24 23:47:43

解決方案2
2 2021-09-26 16:35:31

解決方案3
-1 2015-11-25 09:08:37