首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在html中使用函数,同时导入js文件作为模块。

在html中使用函数,同时导入js文件作为模块。
EN

Stack Overflow用户
提问于 2022-08-01 10:24:59
回答 1查看 159关注 0票数 0

所以,我看到了这个问题的答案。但是,在这些情况下,请求者拥有type=“模块”(在导入javaScript文件时),并且不介意删除它。但是我需要保留它的模块,因为我在其他地方使用导入/导出。一项建议是两次导入JavaScript文件,一次使用type=module,一次不导入。禁用了我的模块导入。

在将我的文件作为模块导入时,是否有一种方法(在onclick事件侦听器中)调用JavaScript函数?

代码语言:javascript
运行
复制
function drawAndMove(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    audi.draw();
    audi.move();
}
代码语言:javascript
运行
复制
<!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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-01 10:29:02

是否有一种方法在将我的文件作为模块导入时调用JavaScript函数(在onclick事件侦听器中)?

是的,但我建议您不要使用HTML onxyz-attribute样式的事件处理程序。相反,通过在定义drawAndMove函数的代码中这样做,使用现代事件处理将其连接起来:

代码语言:javascript
运行
复制
document.getElementById("subId").addEventListener("click", drawAndMove);

onxyz-attribute样式的事件处理程序有几个问题,尤其是它们调用的函数必须是全局函数(当然,模块的许多优点之一是它们在默认情况下不创建全局)。在对比中,使用现代事件处理方法可以处理非全局事件。

但是为了完整起见,为了使它以我不推荐的方式工作,可以将drawAndMove分配给定义它的代码中的window对象:window.drawAndMove = drawAndMove;

但再说一遍:我不建议这么做。

关于您的button元素,请注意:

  1. --它不是在form中,所以它不需要是提交按钮。我建议使用type="button"
  2. type的缺省值已经是"submit",所以您永远不需要在button元素中实际编写type="submit"
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73192328

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档