JavaScript与CSS — 鼠标位置

前端技术 everyinch 1142℃ 0评论

获取鼠标位置是编写拖放操作和上下文菜单的基础,这些功能都需要JavaScript与CSS的配合才能实现。
1. 获取鼠标光标相对于整个页面的x和y位置。因为只能从鼠标事件中才能获得鼠标坐标的信息,所以需要鼠标事件作为参数。

// 鼠标光标的水平位置
function getX(e) {
    // 标准化事件对象
    e = e || window.event;

    // 返回针对非IE浏览器的位置,然后是IE浏览器的位置,最后是0
    return e.pageX || e.clientX + document.body.scrollLeft || 0;
}

// 鼠标光标的水平位置
function getY(e) {
    // 标准化事件对象
    e = e || window.event;

    // 返回针对非IE浏览器的位置,然后是IE浏览器的位置,最后是0
    return e.pageY || e.clientY + document.body.scrollTop || 0;
}

2. 获取鼠标光标相对于当前元素的x和y位置。

// 鼠标相对于当前元素的 x 和 y 位置
function getElementX( e ) {
    return ( e && e.layerX ) || window.event.offsetX;
}
 
function getElementY( e ) {
    return ( e && e.layerY ) || window.event.offsetY;
}


转载请注明:陈童的博客 » JavaScript与CSS — 鼠标位置

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量