javascript addEventlistener"点击“;不起作用

javascript addEventlistener "click" not working

本文关键字：点击 不起作用 quot addEventlistener javascript      更新时间：2023-09-26

我正在制作一个待办事项列表，作为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>

以前，button元素是onClick（）的输入类型，但Chrome不允许这样做。所以我不得不制作一个javascript函数，当它被clikced时就会启动。在我的索引db.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 = "";
    }

为什么当我点击按钮w/id="newitem"时什么都没有发生？

附加函数时，首先执行它，然后将返回值undefined附加到事件。删除括号：

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

将addTodo()作为参数时，并不是在传递函数本身。它所做的第一件事是执行函数并使用返回值作为参数。

由于没有return语句的函数会隐式生成undefined，因此原始代码实际上是在运行该函数，然后附加以下内容：

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

对于仍然有这个bug的人来说，我的情况是菜单有li > a

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

当我将click事件绑定到a时，它不起作用我通过从li监听click事件并使用e.preventDefault() 来修复它

它现在工作

不要使用两个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);
});
相关文章：