所以,我看到了这个问题的答案。但是,在这些情况下,请求者拥有type=“模块”(在导入javaScript文件时),并且不介意删除它。但是我需要保留它的模块,因为我在其他地方使用导入/导出。一项建议是两次导入JavaScript文件,一次使用type=module,一次不导入。禁用了我的模块导入。
在将我的文件作为模块导入时,是否有一种方法(在onclick事件侦听器中)调用JavaScript函数?
function drawAndMove(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
audi.draw();
audi.move();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="compare.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" value="nix" id="farbId">
<button type="submit" id="subId" onclick="drawAndMove()">sub</button>
<main>
<canvas id="canvas" width="800" height="600">
</canvas>
</main>
</body>
</html>
发布于 2022-08-01 10:29:02
是否有一种方法在将我的文件作为模块导入时调用JavaScript函数(在onclick事件侦听器中)?
是的,但我建议您不要使用HTML onxyz
-attribute样式的事件处理程序。相反,通过在定义drawAndMove
函数的代码中这样做,使用现代事件处理将其连接起来:
document.getElementById("subId").addEventListener("click", drawAndMove);
onxyz
-attribute样式的事件处理程序有几个问题,尤其是它们调用的函数必须是全局函数(当然,模块的许多优点之一是它们在默认情况下不创建全局)。在对比中,使用现代事件处理方法可以处理非全局事件。
但是为了完整起见,为了使它以我不推荐的方式工作,可以将drawAndMove
分配给定义它的代码中的window
对象:window.drawAndMove = drawAndMove;
但再说一遍:我不建议这么做。
关于您的button
元素,请注意:
form
中,所以它不需要是提交按钮。我建议使用type="button"
。type
的缺省值已经是"submit"
,所以您永远不需要在button
元素中实际编写type="submit"
。https://stackoverflow.com/questions/73192328
复制相似问题