JS获取鼠标坐标的实例方法_javascript技巧
程序员文章站
2022-03-24 19:53:59
...
复制代码 代码如下:
var restrictX;
var restrictY;
var tip;
// 鼠标坐标
function mousePosition(ev) {
return {
x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
// 鼠标事件
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mousePosition(ev);
restrictX = mousePos.x;
restrictY = mousePos.y;
}
document.onmousemove = mouseMove;
document.onclick = mouseMove;
上面的代码在谷歌和搜狐浏览器中获取的值会不准确,需进行修改,如下:
复制代码 代码如下:
var restrictX;
var restrictY;
var tip;
// 鼠标坐标
function mousePosition(ev){
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return {
x:ev.clientX + scrollLeft - document.documentElement.clientLeft,
y:ev.clientY + scrollTop - document.documentElement.clientTop
};
}
// 鼠标事件
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
restrictX = mousePos.x;
restrictY = mousePos.y;
}
document.onmousemove = mouseMove;
document.onclick = mouseMove;
复制代码 代码如下:
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
这两句为,如果能获取到鼠标坐标,则去前面,否则用后面的方法获取鼠标坐标,“|| ”后面的是给WebKit 内核的浏览器使用
推荐阅读
-
JS获取父节点方法_javascript技巧
-
JS获取并操作iframe中元素的方法_javascript技巧
-
js 获取屏幕各种宽高的方法(浏览器兼容)_javascript技巧
-
JS获取农历日期具体实例_javascript技巧
-
js获取会话框prompt的返回值的方法_javascript技巧
-
JS获取农历日期具体实例_javascript技巧
-
Js鼠标跟随代码小手点击实例方法_javascript技巧
-
js实现感应鼠标图片透明度变化的方法_javascript技巧
-
记录鼠标的轨迹并回放的js代码_javascript技巧
-
javascript实现在某个元素上阻止鼠标右键事件的方法和实例_javascript技巧