Vue 3 Typescript将事件侦听器添加到只有ID的html元素(不能直接访问该元素)

3vpjnl9f  于 2023-03-04  发布在  TypeScript
关注(0)|答案(2)|浏览(116)

我使用的是一个甘特,Vue 3组件,这是我导入的一个模块,所以我无法访问底层的html。我可以通过Chrome检查器查看ID和类,但无法添加ref属性或添加事件(因为我无法访问每个元素的html)我使用CSS为其中一个id添加了滚动条,而且还需要向具有该特定id的元素添加事件侦听器。如何在带有Typescript的Vue 3中执行此操作?我需要添加事件侦听器的原因是,我可以同时滚动两个滚动区。我的组件上已经有了scroll事件,并且还需要能够访问外部模块html元素的scroll事件。

fkaflof6

fkaflof61#

记住,Vuejs应用程序只是一个普通的网络应用程序,所以你可以用Javascript做任何事情。所以我建议你在Vuejs的沿着要有扎实的Javascript知识。
要回答您的问题,您可以通过ID获取元素,并向其附加任何事件:

const yourElement = document.getElementById('your-element-id')
// make sure the element is exists first
if (yourElement) {
  yourElement.addEventListener('click', () => {
    // Do something
  })
}

但你需要保证两点才能让它起作用:

  • 元素必须为exists才能访问
  • ID在任何时候都是相同的

为了确保第一点,您应该在呈现图表后访问您的元素。nextTicksetTimeout在这里应该很有用。
对于第二点,它取决于您正在使用的库。

yizd12fk

yizd12fk2#

简短回答:看起来你做不到。
read this并选择一个可用事件。从您提到的文档中,我可以看到以下事件:

mousedown-bar
mouseup-bar
dblclick-bar
mouseenter-bar
mouseleave-bar
dragstart-bar
drag-bar
dragend-bar
contextmenu-bar

还要注意的是,如何不需要访问组件内部的HTML来了解在哪里绑定事件,但是您不能在不发出此类事件的组件中强制事件。

相关问题