.onclick事件监听器通过div在页面加载后立即运行

Question

这可能是一个nooby问题，但是此脚本已使我丧命：该脚本假定在单击鼠标时使用事件侦听器更改div权重。 函数changeWidth（i）可以正常工作。 问题是页面加载后事件侦听器自动触发，然后停止工作。 没有控制台错误。

var tile1 = document.getElementById("project_tile_01");
var tile2 = document.getElementById("project_tile_02");
var tile3 = document.getElementById("project_tile_03");

tile1.onclick = changeWidth(1);
tile2.onclick = changeWidth(2);
tile3.onclick = changeWidth(3);

function changeWidth(i){
    if(i==1){
        tile1.style.width=(200+"px");
        tile2.style.width=(150+"px");
        tile3.style.width=(150+"px");
        tile4.style.width=(150+"px");
        tile5.style.width=(150+"px");
        tile6.style.width=(150+"px");
    }else if(i==2){
        tile1.style.width=(150+"px");
        tile2.style.width=(200+"px");
        tile3.style.width=(150+"px");
        tile4.style.width=(150+"px");
        tile5.style.width=(150+"px");
        tile6.style.width=(150+"px");
    }else if(i==3){
        tile1.style.width=(150+"px");
        tile2.style.width=(150+"px");
        tile3.style.width=(200+"px");
        tile4.style.width=(150+"px");
        tile5.style.width=(150+"px");
        tile6.style.width=(150+"px");
}

我不确定这是否是加载顺序的问题，这确实是一个最小的页面，脚本在页面末尾使用<script>标记运行。 提前致谢。

Answer 1

tile1.onclick = changeWidth(1);

您将立即使用()调用该函数，并且undefined函数的结果将分配给tile1.onclick 。

您可以改用以下方法：

tile1.onclick = changeWidth.bind(null, 1);

Answer 2

您需要将changeWidth调用包装在一个函数中。

tile1.onclick = function(){changeWidth(1);}

Answer 3

tile1.onclick = changeWidth(1); 如plalx所说，当body加载时会被调用。 您也可以这样做。

仅在单击元素时将触发此事件。

tile1.onclick = function (){
    changeWidth(1);
};

tile2.onclick = function (){
    changeWidth(2);
};

tile3.onclick = function (){
    changeWidth(3);
};