JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
更新时间：2014年09月13日 13:49:42 投稿：mdxy-dxy
这篇文章主要介绍了JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox浏览器),需要的朋友可以参考下
JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera )，测试通过
直接复制成html文件，即可运行。
为方便大家测试特准备了一份在线演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera)_脚本之家</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.tip {
width:200px;
border:2px solid #ddd;
padding:8px;
background:#f1f1f1;
color:#666;
}
</style>
<script type="text/javascript">
//方法1
function mousePos(e){
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
};
};
//方法2
//Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了,
//在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，
//而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
}
function test(e){
document.getElementById("mjs").innerHTML = getMousePos(e).x+','+getMousePos(e).y;
};
</script>
</head>
<body>
<div id="mjs" class="tip">获取鼠标点击位置坐标</div>
<div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div>
</body>
</html>
相关文章
本文分享了利用js+css+html实现固定table的列头不动的实例代码。小编认为具有很好的参考价值，感兴趣的朋友可以看下2016-12-12
本文主要介绍了微信公众号录音文件的播放与保存(amr文件转mp3)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
下面小编就为大家带来一篇详谈innerHTML innerText的使用和区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了js string使用截取与拼接，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在开发中通常在上传图片时,由于各种限制,需要将上传的图片压缩到某一大小范围内才能上传,这篇文章主要介绍了如何用JS将base64图片压缩至指定大小的相关资料,需要的朋友可以参考下2025-04-04
大家心里是否产生过这样的疑问,JS中既然已经有对象这种数据结构,我们为什么还要再单独去使用Set或者Map呢?下面这篇文章主要给大家介绍了关于ES6中Set和Map数据结构的相关资料,需要的朋友可以参考下2022-08-08
在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了BootStrap modal模态弹窗使用小结,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
今天与同事一起看了一个javscript定义函数问题，如何在定义一个函数里给参数一个默认值.2011-07-07
这篇文章主要为大家详细介绍了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
最新评论