javascript - 鼠标悬停时获取正确的 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

clientX 和 clientY 不是 css 规则。您必须分别使用 left 和 top。

像这样:

<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>

请注意，div 的位置将相对于 position:relative 的第一个祖先元素，或者，如果没有找到这样的祖先，则相对于 body 元素。

编辑:我发现您编辑了代码以使用top和left。只要您的代码由正确的事件执行，它就应该可以工作。