使用Javascript取网页中鼠标位置

        在做鼠标移动至一个某些按钮或文字上便在当前位置显示图片的功能时需要用鼠标的坐标来定位,方法比较简单,但面在Firefox的广告做的这么火,甚至用流氓方法,所以需要注意Mozilla或Firefox和IE的兼容.
event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的距离,但定位不光这样就行了,需要考虑到当前网页坐标并不是鼠标的位置(例如把网页滚动条拖到最右下方),所以我们需要加上下面的内容:
var x = event.clientX + document.body.scrollLeft;
var y = event.clientY + document.body.scrollTop;
        如果网页遵循了w3c标准的话需要把 document.body 换成 document.documentElement ,否则 scroll 所取出来的值一律为0.

        如果大家使用上面的代码并且是在firefox下调试的,是不是已经发现了 "event has not defined",当然我也碰到这问题了:
JS: function test_event() {
       var x = event.clientX + document.body.scrollLeft;
       var y = event.clientY + document.body.scrollTop;
       alert("左边:"+x+ ", 右边:"+y);
}
HTML: <span οnclick="test_event();">click me</span>
        需要把event对象传进去,按如下方法修改后便能正常运行,只知道IE和Firefox有些dom不一样,但这种方法就有点搞不懂是什么意思:
JS: function test_event(event) {
       var x = event.clientX + document.body.scrollLeft;
       var y = event.clientY + document.body.scrollTop;
       alert("左边:"+x+ ", 右边:"+y);
}
HTML: <span οnclick="test_event(event);">click me</span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值