在html中使用函数，同时导入js文件作为模块。
在html中使用函数，同时导入js文件作为模块。
提问于 2022-08-01 10:24:59
所以，我看到了这个问题的答案。但是，在这些情况下，请求者拥有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>回答 1
Stack Overflow用户
回答已采纳
发布于 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"。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73192328
复制相关文章
相似问题
腾讯云开发者
