Question

我对打字稿非常陌生，我一直在处理一个简单的打字稿代码，点击按钮，它会在浏览器中显示一条警告信息。我尝试过使用按钮和输入标签，并尝试使用onclick事件和addEventListener。我不太确定这里的问题是什么，所以给予的任何帮助都非常感谢。

＆＃13;

//typescript portion of code
document.getElementById("disp").addEventListener("click", (evt: Event) => this.disp_alrt());

function disp_alrt(){
    alert("You pressed the button!");
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <input type="button" class="button" id="disp" value="Display Alert">
    </body>
</html>

＆＃13;

Answer 1

您可以触发事件或者设置回叫

//typescript portion of code
document.getElementById("disp").addEventListener("click", Event => this.disp_alrt());

document.getElementById("disp2").addEventListener("click", this.disp_alrt, true);

function disp_alrt(event){
    alert("You pressed the button!");
}

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <input type="button" class="button" id="disp" value="Display Alert">
        <input type="button" class="button" id="disp2" value="Display Alert2">
    </body>
</html>

Answer 2

TypeScript不是JavaScript，要运行typescript，您需要将其转换为javascript，您可以在操场上粘贴您的打字稿代码并获取将由浏览器执行和理解的JavaScript。希望这很清楚

我在操场上转换了您的事件代码document.getElementById("disp").addEventListener("click", (evt: Event) => this.disp_alrt());，输出是

var _this = this;
document.getElementById("disp").addEventListener("click", function (evt) { return _this.disp_alrt(); });

https://www.typescriptlang.org/play/

//typescript portion of code
//var _this = this;

function disp_alrt(){
    alert("You pressed the button!");
}
document.getElementById("disp").addEventListener("click", function (evt) { return disp_alrt(); });

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <input type="button" class="button" id="disp" value="Display Alert">
    </body>
</html>

打字稿：按钮点击不调用功能

2 个答案: