在鼠标悬停时获取正确的x和y坐标

Question

<div 
v-for="day in week.days"
        :key="day.timestamp"

        @mouseover="selectDate($event,day)">
</div>

            <div v-show="displayEvents.length!=0" ref='eventList'
     style= "
     background:red; 

     height:min-content;
      width:200px; 
      position:absolute; "
      >
      {{displayEvents}}
    </div>


    <script>
     selectDate: function(event, day) {

      this.$refs.eventList.style.top = event.clientY + "px";
      this.$refs.eventList.style.left = event.clientX + "px";

    },
    </script>

由于某种原因，每当我将鼠标悬停在选定的日期时，该框仅显示在页面的左上角，但是我要实现的目的是将框实际显示在光标指针的确切位置，因此在我的情况下应当以绿色（第12号）突出显示的日期位于顶部，因为正常的工具提示会起作用。

Answer 1

let wb= xlsx.read(file.buffer, {type: "buffer"}); const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; const data = xlsx.utils.sheet_to_csv(ws); 和clientX不是CSS规则。您必须分别使用clientY和left。

赞：

top

请注意，div的位置将相对于<div v-show="displayEvents.length!=0" ref="eventList" style=" background:red; height:50px; width:200px; position:absolute;" > </div> <script> document.addEventListener('mouseover', event => { this.$refs.eventList.style.top = event.clientY + "px"; this.$refs.eventList.style.left = event.clientX + "px"; }) </script> 的第一个祖先元素，或者，如果没有找到祖先，则相对于body元素。

编辑：我看到您已编辑代码以使用position: relative和top。只要您的代码是通过正确的事件执行的，它就可以正常工作。

Answer 2

我通过使用pageY和pageX而不是clientY和clientX解决了这个问题。