代码之家 › 专栏 › 技术社区 › blazing

如何在Typescript中使用EventTarget

dom-events typescript

blazing · 技术社区 · 8 年前

嘿,我是Typescript新手,在实现事件目标时遇到了一些问题。

事件的typescript等效于什么。目标Javascript中使用的匹配项?

示例代码:

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');
      }
    }
  }
}

1 回复 | 直到 8 年前

Zoe - Save the data dump å¼ ç¾¤å³° 7 年前

你需要投( type assertion ) event.target 就像 HTMLElement 提供访问 HTMLElement公司 方法,例如 matches() .没有演员, 事件目标 键入为 EventTarget 这就是为什么你没有看到 匹配项() 或其他 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')) {

推荐文章

Alvaro · mouseenter委派使用vanilla JavaScript?

8 年前

dotnetCarpenter · 如何检查侦听器事件是否为被动事件?

8 年前

Teight · 我的JavaScript代码在尝试使用keydown事件处理程序更改类中的变量时遇到问题

8 年前

jcarpenter2 · DOM-同步事件的计时与setTimeout

8 年前

john Smith · 包装器div上的Javascript模糊事件

8 年前

xiaolingxiao · 导航到页面后运行javascript

8 年前

Thomas Mathews · 从字符串动态创建按钮事件监听器,而不覆盖[重复]

8 年前

blazing · 如何在Typescript中使用EventTarget

8 年前

Alexander Solonik · 即使将事件传递给调度程序,Reducer也显示未定义

8 年前

dekzok · 这似乎不是一个有效的函数。为什么?

8 年前