如何获取鼠标或者某个盒子的相对坐标,一下几种获取方法

  在编写JavaScript代码时,经常会需要获得鼠标或者某个盒子的相对坐标,这里我们就简要介绍一下几种获取方法的不同。

  关于鼠标坐标

  鼠标坐标一般是用event事件获取,其中有以下几个方法:

  其中以pageX , pageY方法使用得较多,其他的方法则不太常使用(*标明)。

  一张图说明三者的区别:

  如图☝

  pageX是指光标相对于该网页的水平位置(网页实际大小),以当前文档的左上角为基准点。

  screenX是指光标相对于该屏幕的水平位置(电脑屏幕),当前屏幕的左上角为基准点。

  clientX是指光标相对于浏览器的水平位置 (当前可见区域),当前窗口的左上角为基准点。

  所以我们如何获取鼠标坐标?根据自己的需求来调用这些方法就行了~

   ...

        var x = event.pageX;
        var y = event.pageY;
        ...

  兼容性

  说到兼容性js获取鼠标坐标,有两点要注意的是:

  第一点这里我就不说了,有兴趣的可以自己研究一下。

  主要谈一下第二点:

  要想在ie和其他浏览器中都支持event事件,就要使用兼容性写法。

  代码如下:

   document.onclick() = function (event) {

            event = event || window.event;
        }

  关于盒子坐标

  这里介绍两种常用的获取盒子坐标的方法:

  看起来它们都是获取当前盒子的 left 值,但是却有很大不同:

  offsetLeft 可以返回没有定位盒子的距离左侧的位置,而 style.left 不可以。offsetTop 返回的是数字js获取鼠标坐标,而 style.top 返回的是字符串,除了数字外还带有单位:px。offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。对于 offsetLeft ,是从父盒子的padding 开始算,border不算,父亲没有定位则以body为准。案例

  关于这些应用的案例,可以参考我的另外一篇文章 放大器实现,有对这些方法的部分运用。

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1982
0 评论
865

发表评论

!