addEventListener的Onclick事件不起作用

Question

检查此代码：

<script>
var next = document.getElementById("next");
var prev = document.getElementById("prev");

next.addEventListener("click",next(),false);
prev.addEventListener("click",prev(),false);

function next(e) {
e.preventDefault();
prev.style.display = "block";
next.style.display = "none";
}
function prev(e) {
e.preventDefault();
prev.style.display = "none";
next.style.display = "block";
}
</script>

<div id="nav">
<a href="javascript:void;" id="prev">&lsaquo;&lsaquo;&lsaquo;</a>
<a href="javascript:void;" id="next">&rsaquo;&rsaquo;&rsaquo;</a>
</div>

我不知道为什么这不起作用。 我正在<body>标记之前加载脚本。 请帮忙。

它给了我错误：未捕获的TypeError：对象[object Object]的属性'next'不是函数

Answer 1

当您在函数中添加括号时，函数将立即被调用，结果（在这种情况下为未定义）将返回到addEventListener。

您想引用函数，而不是调用它们

next.addEventListener("click", next, false);
prev.addEventListener("click", prev, false);

下一个错误是您为变量和函数使用了相同的名称，因此当您说next.style它现在是函数，而不是元素，因为函数名会覆盖变量

var next_elem = document.getElementById("next");
var prev_elem = document.getElementById("prev");

next_elem.addEventListener("click", next_fn, false);
prev_elem.addEventListener("click", prev_fn, false);

function next_fn(e) {
    e.preventDefault();
    prev_elem.style.display = "block";
    next_elem.style.display = "none";
}

function prev_fn(e) {
    e.preventDefault();
    prev_elem.style.display = "none";
    next_elem.style.display = "block";
}

Answer 2

您需要提及函数名称。 通过指定()和函数名称，它们将被调用。

更改为：

next.addEventListener("click",next,false);
prev.addEventListener("click",prev,false);

addEventListener的Onclick事件不起作用

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-04-03 05:05:14

解决方案2
0 2014-04-03 05:06:28

addEventListener的Onclick事件不起作用

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-04-03 05:05:14

解决方案2 0 2014-04-03 05:06:28

解决方案1
3 已采纳 2014-04-03 05:05:14

解决方案2
0 2014-04-03 05:06:28