美文网首页
JavaScript鼠标事件及event坐标

JavaScript鼠标事件及event坐标

作者: 秉持本心 | 来源:发表于2020-01-02 16:40 被阅读0次
    一、事件
    1、onclick

    事件会在对象被点击时发生
    请注意: onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才触发的。

    2、onmousedown

    事件会在鼠标按键被按下时发生

    3、onmouseup

    事件会在鼠标按键被松开时发生

    4、onmousemove

    事件会在鼠标指针移动时发生

    5、onmouseover

    事件会在鼠标指针移动到指定的对象上时发生

    6、onmouseout

    事件会在鼠标指针移出指定的对象时发生

    二、event中各坐标含义
    1、offsetX、offsetY

    offsetX:设置或获取鼠标点击位置相对于触发事件对象的水平(X)距离
    offsetY:设置或获取鼠标点击位置相对于触发事件对象的垂直(Y)距离

    2、clientX、clientY

    clientX:设置或获取事件被触发时鼠标指针相对于浏览器可视区域(不计算水平滚动的距离)的水平(X)坐标
    clientY:设置或获取事件被触发时鼠标指针相对于浏览器可视区域(不计算水平滚动的距离)的垂直(Y)坐标

    3、pageX、pageY

    pageX:设置或获取事件被触发时鼠标指针相对于浏览器的水平(X)坐标,也就是clientX加上水平滚动条的距离
    pageY:设置或获取事件被触发时鼠标指针相对于浏览器的垂直(Y)坐标,也就是clientY加上垂直滚动条的距离

    4、screenX、screenY

    screenX:设置或获取事件被触发时鼠标指针相对于用户屏幕的水平(X)坐标
    screenY:设置或获取事件被触发时鼠标指针相对于用户屏幕的垂直(Y)坐标

    5、x、y

    x:设置或获取事件被触发时鼠标指针相对于父元素的水平(X)坐标
    y:设置或获取事件被触发时鼠标指针相对于父元素的垂直(Y)坐标

    6、layerX、layerY

    条件:触发事件对象未设置 position: relative(相对定位)或 position: absolute(绝对定位)
    layerX:设置或获取事件被触发时鼠标指针相对于浏览器的水平(X)坐标
    layerY:设置或获取事件被触发时鼠标指针相对于浏览器的垂直(Y)坐标
    条件:触发事件对象设置了 position: relative(相对定位)或 position: absolute(绝对定位)
    layerX:设置或获取事件被触发时鼠标指针相对于触发事件对象的水平(X)坐标
    layerY:设置或获取事件被触发时鼠标指针相对于触发事件对象的垂直(Y)坐标

    相关文章

      网友评论

          本文标题:JavaScript鼠标事件及event坐标

          本文链接:https://www.haomeiwen.com/subject/bitooctx.html