Question

嘿，我是Typescript的新手，我在实现Event Target方面遇到了一些麻烦。

Javascript中使用的event.target.matches的等效手稿是什么？

示例代码：

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()方法的访问权限。如果没有强制转换，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')) {

希望这有帮助！

如何在Typescript中使用EventTarget

1 个答案: