Question

因此，我将事件侦听器添加到元素数组，以便将鼠标悬停在特定元素上时，会将属性设置为该元素的id。但是，与其使用鼠标悬停在其上的元素的id，而是选择添加了事件侦听器的最后一个元素。

我想我的问题是如何获取鼠标悬停在元素上的ID？

还请注意，我正在使用Vue，并且尝试使用@mouseover事件，但是我想是因为我在软件包vue-pdf上使用了它，所以没有注册该事件？

   <pdf 
        v-for="i in numPages"
        :key="i"
        :page="i"
        :src="src"
        v-if="!loading"
        @num-pages="pageCount = $event"
        :ref="`${i}`"
        :id="`${i}`"
        @mouseover="setPage(i)"
    />

无论如何，一旦文档被渲染，我就调用此方法

methods:{
addListener() {
  if(this.numPages > 0) {
    for(var i = 0; i < this.numPages; i++) {
       var span = this.$refs[i+1][0].$el

       //this is the area I am having issues with
       span.addEventListener('mouseover', () => {    
          this.currentPage = span.getAttribute('id')
        })


       }
    } else {
    console.log('didnt work')
  }
},
}

mounted() {
   this.addListener()
}

我还使用getBoundClientRect构建了一种解决方法，但是我想弄清楚当前正在查看的元素应该比这更容易。

Answer 1

我还必须查看与您的问题有关的一件事是事件冒泡以及如何阻止它

我发现的问题是，是否有一个带有嵌套元素的容器，其中包含子事件，这三个事件都被触发了 Event Bubbling

除此之外，使用箭头功能进行事件有时会遗漏重要的事件信息。

//----------------------------------^--
span.addEventListener('mouseover', (e) => {    

     // this.currentPage = span.getAttribute('id')
     let myEvent = e.target || e.currentTarget ;
     this.currentPage = myEvent.getAttribute('id') ;

     //Check out details of the event ....
     console.log(myEvent );
    })

“ e”是对事件的引用，因此您正在寻找“ myEvent.getAttribute（'id'）”。就冒泡而言，您可能会单击带有该事件的嵌套在该元素内的子元素，您可以引用 e.target.parent 或 e.target.parent .parent 遍历DOM以获得事件的元素详细信息。

如果您具有每个都有自己事件的嵌套元素，例如说一个带事件的div，则跨越嵌套在div内的单独事件。您可以使用 e.stopPropagation（）;

阻止事件冒泡并触发div事件。

这意味着在触发

时

跨度

事件父母

div

事件不会被触发

如何获取鼠标悬停在元素上的属性

1 个答案: