栏目导航
热点推荐
- 使用JS进行目录上传(相当于批量
- 推荐学习:精通JS正则表达式
- js创建对象的几种常用方式小结(
- jQuery技巧总结
- 10个JavaScript小技巧
- 非常全面的实用JavaScript开发工
- 网站统计之javascript代码加载优
- JS实现广告顺序轮播和随机轮播四
- 使用javascript让页面自适应
- 24小时退弹一次的代码,可弹SP2S
- (Tips&Tricks;)用客户端模板精简J
- js教程:JavaScript作用域(Scope)
阅览排行
使用Javascript取网页中鼠标位置
www.jz123.cn 2009-01-15 来源: 中国建站 编辑整理 我要投递新闻
在做鼠标移动至一个某些按钮或文字上便在当前位置显示图片的功能时需要用鼠标的坐标来定位,方法比较简单,但面在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 onclick="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 onclick="test_event(event);">click me</span>
上一篇:js cookie 的时间设置与删除cookie 下一篇:JavaScript中的delete操作符