如果我匯入一些東西，然后使用它，它不會在函式中作業，或者沒有外部 js 的函式但使用行內 js
例如
<html>
<body>
<button onclick="foo()">Click Me</button>
</body>
<script type="module">
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
confetti()
</script>
</html>
作品
但
<html>
<body>
<button onclick="foo()">Click Me</button>
</body>
<script type="module">
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
function foo(){
confetti()
}
</script>
</html>
和
<html>
<body>
<button onclick="foo()">Click Me</button>
</body>
<script type="module" src="script.js"></script>
</html>
腳本.js：
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
function foo() {
confetti()
}
或 script.js：
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
confetti()
不作業
uj5u.com熱心網友回復：
請停止使用行內事件偵聽器，這需要全域變數，從而破壞了模塊的全部目的。
相反，使用 JavaScript 添加監聽器：
<button id="foo">Click Me</button>
<script type="module">
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
document.getElementById('foo').addEventListener('click', confetti);
</script>
uj5u.com熱心網友回復：
問題在于將腳本的型別定義為module，型別模塊意味著您要在此腳本中匯入另一個模塊。所以該型別腳本內的變數和函式在module執行范圍之外是不可訪問的。
解決方案是將函式分配給全域范圍window scope：
<script type="module">
import confetti from "https://cdn.skypack.dev/canvas-confetti";
window.foo = function () {
confetti();
};
</script>
這是一個現場演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428641.html
標籤：javascript html
上一篇：更改html頁面中的值src