在将 js 文件作为模块导入时，在 html 中使用 function

Question

所以，我看到这个问题有点回答。 但是在这些情况下，询问的人有 type="module" （在导入 javaScript 文件时）并且不介意将其删除。 但我需要离开它模块，因为我在其他地方使用导入/导出。 一项建议是导入 JavaScript 文件两次，一次使用 type=module，一次没有。 这禁用了我的模块导入。

有没有办法在将我的文件作为模块导入时调用 JavaScript function （在 onclick 事件侦听器中）？

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>

Answer 1

有没有办法在将我的文件作为模块导入时调用 JavaScript function （在 onclick 事件侦听器中）？

是的，但我建议您不要使用 HTML onxyz -attribute 样式事件处理程序。 相反，通过在定义drawAndMove function 的代码中执行此操作，使用现代事件处理将其连接起来：

document.getElementById("subId").addEventListener("click", drawAndMove);

onxyz -attribute 样式事件处理程序有几个问题，尤其是它们调用的函数必须是全局函数（当然，模块的许多优点之一是它们默认不创建全局函数）。 相反，使用现代事件处理与非全局变量一起工作。

但为了完整drawAndMove ，为了使其以我不推荐的方式工作，请在定义它的代码中将 drawAndMove 分配给window object 以使其成为全局： window.drawAndMove = drawAndMove;

但同样：我不建议这样做。

关于您的button元素的旁注：

它不在form中，因此不需要它是提交按钮。 我建议type="button"代替。
type的默认值已经是"submit" ，因此您不需要在button元素中实际编写type="submit" 。

在将 js 文件作为模块导入时，在 html 中使用 function

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-01 10:29:02

在将 js 文件作为模块导入时，在 html 中使用 function

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-01 10:29:02

解决方案1
1 已采纳 2022-08-01 10:29:02