.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);
};