多浏览器兼容的获取元素和鼠标的位置的js代码

 更新时间:2009年12月15日 17:45:34   作者:  
获取元素和鼠标的位置(兼容IE6.0,IE7.0,IE8.0,FireFox2.0,FireFox3.5,Opera),该功能是我一同事钻研出来的,目标是为了实现与QQ自定义布局和拖放模块类似的功能。
复制代码 代码如下:

//获取元素的位置
function getLeft(obj) {
if (obj == null)
return null;
var mendingObj = obj;
var mendingLeft = mendingObj.offsetLeft;
while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != "BODY") {
mendingLeft = mendingLeft + mendingObj.offsetParent.offsetLeft;
mendingObj = mendingObj.offsetParent;
}

return mendingLeft;
};
function getTop(obj) {
if (obj == null)
return null;
var mendingObj = obj;
var mendingTop = mendingObj.offsetTop;
while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != "BODY") {
mendingTop = mendingTop + mendingObj.offsetParent.offsetTop;
mendingObj = mendingObj.offsetParent;
}
return mendingTop;
};
//获取鼠标的位置
function getMousePosition(event) {
var position = {
MouseX: 0,
MouseY: 0
}
if (event.pageX != undefined) {
position.MouseX = event.pageX;
position.MouseY = event.pageY;
}
else {
var target = EventUtil.getTarget(event);
position.MouseX = event.offsetX + getLeft(target);
position.MouseY = event.offsetY + getTop(target);

}
return position;

相关文章

  • JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能

    JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能

    这篇文章主要介绍了JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能的相关资料,需要的朋友可以参考下
    2017-06-06
  • 如何实现JS函数的重载

    如何实现JS函数的重载

    如何实现JS函数的重载...
    2006-09-09
  • JavaScript实现4位随机验证码的生成

    JavaScript实现4位随机验证码的生成

    这篇文章主要为大家详细介绍了JavaScript实现4位随机验证码的生成,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript原生数组Array常用方法

    JavaScript原生数组Array常用方法

    在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不属于变异方法. 在这里就复习一下Array所提供的这几个方法的使用
    2017-04-04
  • js观察者模式的弹幕案例

    js观察者模式的弹幕案例

    这篇文章主要为大家详细介绍了js观察者模式的弹幕案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js实现自动锁屏功能

    js实现自动锁屏功能

    有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-06-06
  • js实现div色块碰撞

    js实现div色块碰撞

    这篇文章主要为大家详细介绍了js实现div色块碰撞,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS原型、原型链深入理解

    JS原型、原型链深入理解

    这篇文章主要针对javascript中的原型、原型链深入理解,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript Array对象扩展indexOf()方法

    JavaScript Array对象扩展indexOf()方法

    JavaScript中Array对象没有indexOf()方法,可通过下面的代码扩展,需要的朋友可以参考下
    2014-05-05
  • 利用js将ajax获取到的后台数据动态加载至网页中的方法

    利用js将ajax获取到的后台数据动态加载至网页中的方法

    今天小编就为大家分享一篇利用js将ajax获取到的后台数据动态加载至网页中的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论