使用proxy实现一个监听鼠标事件

由于弹框遮罩层问题，如果绑定鼠标移入移出事件不能顺利，就想着监听鼠标坐标来实现，vue拥有监听器实现简单，就想着用proxy来做一个

如下代码

<template>
  <div id="x">x:0</div>
  <div id="y">y:0</div>

  <div class="myDiv" index="1">mydiv1</div>
  <div class="myDiv" index="2">mydiv2</div>
  <div class="myDiv" index="3">mydiv3</div>
  <div class="myDiv" index="4">mydiv4</div>
  <div class="myDiv" index="5">mydiv5</div>
  <div class="myDiv" index="6">mydiv6</div>
  <div class="myDiv" index="7">mydiv7</div>
  <div class="myDiv" index="8">mydiv8</div>
  <div class="myDiv" index="9">mydiv9</div>

    <div id="fullscreen-overlay">
        <div id="fullscreen-popup">
            <p>这是一个全屏弹窗</p>
        </div>
    </div>
</template>

<script>
import { onMounted } from 'vue';
export default {
  name: 'HelloW',
  setup(){
    let position//当前悬浮元素
    let x1,x2,y1,y2//当前悬浮元素边界
    const handle = {
      get: function (target, key, receiver) {
        return Reflect.get(target, key, receiver);
      },
      set: function (target, key, value, receiver) {
          let obj = {x:0,y:0}
          if(key=='x'){
            obj.x = value
            document.getElementById('x').innerText=`x:${obj.x}`
            if(x1<value&&x2>value){
              //在元素区域内继续监听
              watch()
            }else{
              //出界解除监听
              disWatch()
            }
          }
          if(key=='y'){
            obj.y = value
            document.getElementById('y').innerText=`y:${obj.y}`
            if(y1<value&&y2>value){
              watch()
            }else{
              disWatch()
            }
          }
        return Reflect.set(target, key, value, receiver);
      }
    }

    //创建newObjposition对象实现设置属性拦截
    const newObjposition = new Proxy({x:0,y:0},handle)

    //鼠标移动处理事件，弹框显示时开始监听
    const updateMousePosition = function(event){
      x1 = position.target.getBoundingClientRect().left
      x2 = position.target.getBoundingClientRect().left+100
      y1 = position.target.getBoundingClientRect().top
      y2 = position.target.getBoundingClientRect().top + 50
      newObjposition.x = event.pageX
      newObjposition.y = event.pageY
    }

    //监听
    const watch = function(){
      window.addEventListener('mousemove',updateMousePosition)
    }
    //消除遮罩
    const disWatch = function(){
      const fullscreenoverlay = document.getElementById('fullscreen-overlay')
      fullscreenoverlay.style.display = 'none'
    }
   onMounted(()=>{
    let nodes = document.getElementsByClassName('myDiv')
    const fullscreenoverlay = document.getElementById('fullscreen-overlay')
    Array.from(nodes).forEach(ele=>{
      ele.addEventListener('mouseover',(e)=>{
        fullscreenoverlay.style.display = 'block'
        position = e
        console.log(position.target.getAttribute("index"))
        watch()
      })
    })
   })
    return {
      newObjposition
    }
  },
  
}
</script>

<style scoped>
     .myDiv{
          z-index: 800;
          border: 1px solid gainsboro;
          padding: 10px;
          background: gainsboro;
          width: 100px;
          height: 50px;
          margin: 30px;
          box-sizing: border-box;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        #fullscreen-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 901;
          }

          #fullscreen-popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            text-align: center;
            width: 500px;
            height: 200px;
            }

            #close-button {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        #x{
        }
        #y{
        }
</style>