Question

我在<td>元素上有一些addEventListener，只要我运行.html，就会激活它们中的5个而不点击它们。我正在使用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：这是我所看到的图像：

Answer 1

立即调用函数的原因是因为你添加了括号，它调用了函数，你只想引用它

one.addEventListener('click', drawImage);

表示没有参数，但您可以使用匿名函数

one.addEventListener('click', function() {
    drawImage('one')
});

或使用this.id代替drawImage函数，看起来应该是同样的事情。

真正的问题可能就是为什么你不使用jQuery

$('#screen tr td').on('click', function() {
    drawImage(this.id);
});

addEventListener无缘无故激活？

1 个答案: