Question

这可能是一个不成熟的问题，但这个脚本让我失望：脚本假设在鼠标点击时用事件监听器改变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");
}

我不确定这是否是加载顺序的问题，这实际上是脚本与＆lt;脚本＆gt;标签在页面的末尾。提前致谢。

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

正如plalx所说，正在进行正文加载时会调用此tile1.onclick = changeWidth(1);。你也可以这样做。

仅在单击元素时才会触发此操作。

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

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

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

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

3 个答案: