typescript - 如何在 Typescript 中使用 EventTarget

Question

嘿，我是 Typescript 的新手，在实现 Event Target 时遇到了一些问题。

Javascript 中使用的 event.target.matches 的 typescript 等价物是什么？

示例代码:

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

你需要转换 ( type assertion ) event.target就像 HTMLElement提供访问 HTMLElement方法如 matches() .没有 Actor ，event.target键入为 EventTarget这就是为什么您没有看到 matches()或其他 HTMLElement可用的方法。

if (!(<HTMLElement> event.target).matches('.dropbtn')) { }

这是一个 example在行动。

window.onclick = function(event) {
  if (!(<HTMLElement> event.target).matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

根据@WsCandy 的建议，您也可以使用 as作为备选:

window.onclick = function(event) {
      const target = event.target as HTMLElement;
      if (!target.matches('.dropbtn')) {