A盒子如何监听B盒子鼠标事件中A盒子鼠标偏移坐标

图片描述

A盒子的鼠标偏移量一旦鼠标进入B盒子当中就无法正确监听到A盒子的鼠标偏移量

我想知道怎么动态求鼠标在B盒子时 ,相对于A盒子的偏移量

代码:

A.addEventListener('mousemove',function(e){
    console.log('A:',e.offsetX)
})

//鼠标移动到B盒子时打印出的A盒子的鼠标偏移量和B盒子的鼠标偏移量一样(这是错误的)
B.addEventListener('mousemove',function(e){
    console.log('B:',e.offsetX)
})

阅读 2.4k

转载一个回答

offsetX 表示鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 表示鼠标指针位置相对于触发事件的对象的 y 坐标。
mousemove事件是冒泡的，当里面的div触发mousemove事件时会向上冒泡，当冒泡到最外层div时调用事件处理程序。任何一个事件的目标元素都是最开始触发事件的那个元素。所以event.offsetX/Y表示的是你触发mousemove事件的源对象的offsetX/Y，也就是里面的div。

转载地址

更新于7-24

我写了一个例子去测试，用clientX/Y实现的，测试是可行的，有滚动条也不会影响效果。

<html>
    <body>
        <div id="a" style="position: relative;width:500px;height:500px;border: 1px solid red;">
            A
            <div
                id="b"
                style="position: absolute;top: 50px; left: 50px; width:200px;height:200px;border: 1px solid blueviolet;"
            >
                B
            </div>
        </div>
    </body>
    <script>
    function myAnimation(fn) {
      const _this = this;

      return function() {
        const args = [].slice.call(arguments);
        requestAnimationFrame(function() {
          fn && fn.apply(_this, args);
        });
      }
    }

        const A = document.getElementById('a');
        const B = document.getElementById('b');

        let moving = false;
        let startOffset = undefined;
        let lastOffset = undefined;
        let endOffset = undefined;

        A.addEventListener(
            'mousemove',
            myAnimation(function(e) {
                if (!moving) return;

        const { clientX, clientY } = e;
        lastOffset = {
          x: clientX,
          y: clientY
        };
                const { x, y } = startOffset;
        B.style.transform = `translate(${clientX - x}px,${clientY - y}px)`;
        
        console.log('moving', e.target.getAttribute('id'), clientX, clientY, clientX - x, clientY - y);
            })
        );

        A.addEventListener('mousedown', function(e) {
            // 在A里面移动B
      if (moving || e.target.getAttribute('id') !== 'b') return;
      
      const { clientX, clientY } = e;
            lastOffset = startOffset = {
                x: clientX,
                y: clientY,
            };
      moving = true;
      
      console.log('start moving', startOffset);
        });

        A.addEventListener('mouseup', function(e) {
      if (!moving) return;
      const { clientX, clientY } = e;
            endOffset = {
                x: clientX,
                y: clientY,
            };
      moving = false;
      const styles = window.getComputedStyle(B);
      const { left, top } = styles;
      const { x, y } = startOffset;
      const leftNew = parseInt(left) + lastOffset.x - x;
      const topNew = parseInt(top) + lastOffset.y - y;
      B.style.left = `${leftNew}px`;
      B.style.top = `${topNew}px`;
      B.style.transform = '';
      
      console.log('end moving', leftNew, topNew);
        });

        // B.addEventListener(
        //     'mousemove',
        //     myAnimation(function(e) {
        //         if (!moving) return;
        //         console.log('B:', e.clientX);
        //     })
        // );
    </script>
</html>

A盒子如何监听B盒子鼠标事件中A盒子鼠标偏移坐标

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？