我在 <td> 上有一些 addEventListener元素，一旦我运行 .html，它们中的 9 个就会激活，而无需我点击它们。我正在使用 jquery 和 normalize.css 文件。
JavaScript
window.onload = function(){
var turn = 1;
document.title = "First Player";
var coolDown = 'False';
var Oone, Otwo, Othree, Ofour, Ofive, Osix, Oseven, Oeight, Onine, Xone, Xtwo, Xthree, Xfour, Xfive, Xsix, Xseven, Xeight, Xnine
var OGridArray = [Oone, Otwo]
var makeScreen = function(){
var height = $(window).height();
var width = $(window).width();
$('#screen').height(height);
$('#screen').width(height);
var extraSpace = width - height;
var halfOfExtraSpace = extraSpace / 2;
$('#screen').css("left", halfOfExtraSpace);
};
var drawImage = function(section){
if (turn == 1){
if (coolDown == 'False'){
alert(Oone) //Debugging stuff :p
alert(Otwo)
alert(Othree)
alert(Ofour)
alert(Ofive)
alert(Osix)
alert(Oseven)
alert(Oeight)
alert(Onine)
OGridArray = [Oone, Otwo, Othree, Ofour, Ofive, Osix, Oseven, Oeight, Onine]
if (OGridArray.indexOf('O' + section) == -1){
drawCircle(section);
turn = 2;
document.title = "Second Player";
coolDown = 'True';
};
};
};
if (turn == 2){
if (coolDown == 'False'){
drawCross(section);
turn = 1;
document.title = "First Player";
coolDown = 'True';
};
};
coolDown = 'False';
};
var drawCircle = function(section){
alert('circle red')
$('#' + section).css("background-color", "red")
if ('O' + section == "Oone"){
Oone = "Oone"
};
if ('O' + section == "Otwo"){
Otwo = "Otwo"
};
if ('O' + section == "Othree"){
Othree = "Othree"
};
if ('O' + section == "Ofour"){
Ofour = "Ofour"
};
if ('O' + section == "Ofive"){
Ofive = "Ofive"
};
if ('O' + section == "Osix"){
Osix = "Osix"
};
if ('O' + section == "Oseven"){
Oseven = "Oseven"
};
if ('O' + section == "Oeight"){
Oeight = "Oeight"
};
if ('O' + section == "Onine"){
Onine = "Onine"
};
};
var drawCross = function(section){
alert('cross blue')
};
makeScreen();
var one = document.getElementById('one');
one.addEventListener('click', drawImage('one'));
var two = document.getElementById('two');
two.addEventListener('click', drawImage('two'));
var three = document.getElementById('three');
three.addEventListener('click', drawImage('three'));
var four = document.getElementById('four');
four.addEventListener('click', drawImage('four'));
var five = document.getElementById('five');
five.addEventListener('click', drawImage('five'));
var six = document.getElementById('six');
six.addEventListener('click', drawImage('six'));
var seven = document.getElementById('seven');
seven.addEventListener('click', drawImage('seven'));
var eight = document.getElementById('eight');
eight.addEventListener('click', drawImage('eight'));
var nine = document.getElementById('nine');
nine.addEventListener('click', drawImage('nine'));
};
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<script src="main.js"></script>
<title>JavaScript Interaction Test.</title>
</head>
<body>
<table id="screen">
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr>
<td id="four"></td>
<td id="five"></td>
<td id="six"></td>
</tr>
<tr>
<td id="seven"></td>
<td id="eight"></td>
<td id="nine"></td>
</tr>
</table>
</body>
</html>
在发表评论/投票之前，请记住我仍在学习 javascript，而且我不知道很多其他人可能觉得简单和基本的事情。
感谢您的宝贵时间。
PS:这是我所看到的图像:
最佳答案
函数被立即调用的原因是因为你添加了括号，它调用了该函数，你只想引用它
one.addEventListener('click', drawImage);
这意味着没有参数，但您可以使用匿名函数
one.addEventListener('click', function() {
drawImage('one')
});
或者在drawImage函数中使用this.id，看起来应该是同样的事情。
真正的问题也许是为什么你不使用 jQuery
$('#screen tr td').on('click', function() {
drawImage(this.id);
});
关于javascript - addEventListener 无故激活？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28662574/