想在页面上增加跟随鼠标的十字瞄准线, X 线偏移了,不得其解。。。

2021-01-15 11:15:27 +08:00
 qazwsxkevin
    var ox = document.createElement('div');
    var oy = document.createElement('div');
    ox.style.width = '100%';
    ox.style.height = '1px';
    ox.style.backgroundColor = '#FF0000';
    ox.style.position = 'fixed';
    ox.style.left = 0;
    document.body.appendChild(ox);
    oy.style.height = '100%';
    oy.style.width = '1px';
    oy.style.backgroundColor = '#FF0000';
    oy.style.position = 'fixed';
    oy.style.top = 0;
    document.body.appendChild(oy);
    document.onmousemove = function (e) {
        //写法一
        var e = e || event;
        var x = e.pageX;
        var y = e.pageY;

        //写法二
        // var e = e || window.event;  //event 的兼容写法
        // var x = e.pageX || e.clientX + scroll().left;  //获取 pageX 的兼容写法
        // var y = e.pageY || e.clientY + scroll().top;

        ox.style.top = y + 'px';
        oy.style.left = x + 'px';
    };

    //写法二要用到的函数
    function scroll() {
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }

Y 线是正常跟随鼠标的,X 轴向下偏移了半个屏幕,请教大家问题所在?
目前只试过 IE 和 Firefox,应该不是兼容问题? 只想在 Firefox 上能跑就可以了。。。

1940 次点击
所在节点    JavaScript
5 条回复
IsaacYoung
2021-01-15 11:26:52 +08:00
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX

pageX 是一个由 MouseEvent 接口返回的相对于整个文档的 x (水平)坐标以像素为单位的只读属性。

这个属性将基于文档的边缘,考虑任何页面的水平方向上的滚动。举个例子,如果页面向右滚动 200px 并出现了滚动条,这部分在窗口之外,然后鼠标点击距离窗口左边 100px 的位置,pageX 所返回的值将是 300 。
xiaoming1992
2021-01-15 11:30:54 +08:00
你可以直接更换鼠标样式啊,不是更轻量吗
qazwsxkevin
2021-01-15 11:48:38 +08:00
@IsaacYoung 明白了,感谢,修正过来了

@xiaoming1992 表的纵横比较广阔( 64X128 ),第一列是序号,第一行是标题栏,没有十字线,会眼花的。

本来还想着落到表格的格子上,对应 X,Y 的序号和标题栏高亮的,结果看起来,还是十字线比较靠谱。
xeaglex
2021-01-15 14:12:41 +08:00
MENGKE
2021-01-16 11:38:34 +08:00
应该为 clientX 和 clientY

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/745165

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX