innerHTML模板添加的函数会自动触发

Question

我遇到了这种奇怪的行为。我想添加一个包含onclick行为的html模板。所以我尝试了下面的代码。问题是内部的函数callFunction是自动执行的。我的猜测是callFunction是在解析innerHTML中的插值字符串时执行的。有办法绕过这种行为吗？谢谢

const container = document.getElementById("test1");
function callFunction() {
console.log('called');
}
container.innerHTML = `<button onClick="${callFunction()}"> Click on me</button>`

<div id="test1"></div>

Answer 1

模板文本中的表达式会立即执行。如果您正在创建一个HTML字符串，则不需要在创建时在相同的范围内调用该函数。您甚至不需要模板文字。您只需要创建一个具有onClick属性的字符串。

container.innerHTML = '<button onClick="callFunction()"> Click on me</button>'

const container = document.getElementById("test1");
function callFunction() {
console.log('called');
}
container.innerHTML = `<button onClick="callFunction()"> Click on me</button>`

<div id="test1"></div>