热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JS获取鼠标坐标的实例方法

这篇文章介绍了JS获取鼠标坐标的实例方法,有需要的朋友可以参考一下
代码如下:

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 内核的浏览器使用
推荐阅读
author-avatar
最最后的力气撑起最灿烂的微笑
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有