时间戳

首页 > 解决方案 > 如何获取鼠标悬停元素的属性

javascript - 如何获取鼠标悬停元素的属性

问题描述

因此，我将事件侦听器添加到元素数组中，以便当将特定元素悬停在其上时，它将为该元素的 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但我觉得弄清楚我当前正在查看的元素应该比这更容易。

标签： javascriptvue.js

解决方案

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

我发现的问题是，如果有一个包含嵌套元素的容器，其中包含子事件所有三个事件都被触发 事件冒泡

除此之外，对事件使用箭头函数有时会遗漏重要的事件信息。

//----------------------------------^--
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')”就是您要查找的内容。在冒泡 Some Times 方面，您可能会单击嵌套在元素内的子元素，事件您可以引用e.target.parent或e.target.parent.parent以遍历 DOM 以到达举行事件的元素详细信息。

如果您有嵌套元素，每个元素都有自己的事件，例如带有事件的 div ，则跨越嵌套在 div 内的单独事件。您可以使用e.stopPropagation();阻止事件冒泡并触发 div 事件；

这意味着当触发

跨度

事件父母

div

事件不会被触发

推荐阅读