Question

我想知道为什么我的代码不起作用。我只是想将height属性从'1000'更改为'2' 这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<canvas id="canv" width="1000" height="1000" onclick="click()" onmousemove=""></canvas>
<script type="text/javascript">
function click(){
    var l = document.getElementById("canv");
    l.height = "2";

}
</script>
</body>
</html>

Answer 1

您已经调用了处理程序click。 onxyz - 样式属性处理程序在元素本身混合到范围内的环境中执行，因此处理程序中的click引用画布本身的click，而不是全局函数。所以你的全局函数没有被调用。

如果使用其他名称，则不会发生冲突，并调用全局函数：

function clickCanvas(){
    console.log("Got here");
    var l = document.getElementById("canv");
    l.height = "2";
}

<canvas id="canv" width="1000" height="1000" onclick="clickCanvas()" onmousemove=""></canvas>

我强烈建议不要使用onxyz - 属性样式处理程序，不仅仅是因为它们依赖于全局函数，而且全局变量是Bad Thing™。相反，使用现代事件处理来连接你的处理程序，除了与其他人很好地玩之外，你不会遇到名称冲突问题。它还允许您在处理程序中使用this来引用您挂钩事件的元素：

document.getElementById("canv").addEventListener("click", function() {
    console.log("Got here");
    this.height = "2";
}, false);

<canvas id="canv" width="1000" height="1000"></canvas>

JS Cose没有运行

1 个答案: