锐客网

  1. 首页 > it技术 > >

取得浏览器当前鼠标的X|取得浏览器当前鼠标的X,Y坐标的JavaScript脚本及document元素的一些重要属性

原文地址: http://www.lvjiyong.com/item/qude-dangqian-shubiao-de-X-Y-zuobiao-37525

为了让鼠标移到小图上显示大图,我利用鼠标事件新建了一个层来显示大图.当然之前最好得到XY坐标

取得当前鼠标的X,Y坐标
function SelfXY(){
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset) {
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){// Explorer 6 Strict
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY)
return arrayPageScroll;
}
附:鼠标及对象坐标控制属性
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。


clientHeight
获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。

clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。

clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。


SCROLL属性
scroll
设置或获取滚动是否关闭。

scrollHeight
获取对象的滚动高度。

scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth
获取对象的滚动宽度。

event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标

offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条

IE与FireFox的兼容性问题（JoeCom整理--未完待续）

  1. window.event
    • IE：有window.event对象
    • FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
  2. 鼠标当前坐标
    • IE：event.x和event.y。
    • FF：event.pageX和event.pageY。
    • 通用：两者都有event.clientX和event.clientY属性。
  3. 鼠标当前坐标(加上滚动条滚过的距离)
    • IE：event.offsetX和event.offsetY。
    • FF：event.layerX和event.layerY。
  4. 标签的x和y的坐标位置：style.posLeft 和 style.posTop
    • IE：有。
    • FF：没有。
    • 通用：object.offsetLeft 和 object.offsetTop。
  5. 窗体的高度和宽度
    • IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
    • FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
    • 通用：document.body.clientWidth和document.body.clientHeight。
  6. 添加事件
    • IE：element.attachEvent("onclick", func); 。
    • FF：element.addEventListener("click", func, true)。
    • 通 用：element.οnclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent("onclick", func1); element.attachEvent("onclick", func2)这样func1和func2都会被执行。
  7. 标签的自定义属性
    • IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
    • FF：不能用div1.value和div1["value"]取。
    • 通用：div1.getAttribute("value")。
  8. 父节点、子节点和删除节点
    • IE：parentElement、parement.children，element.romoveNode(true)。
    • FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
  9. 画图
    • IE：VML。
    • FF：SVG。
  10. CSS：透明
    • IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
    • FF：opacity:0.6。
  11. CSS：圆角
    • IE：不支持圆角。
    • FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px; -moz-border- radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px; 。
  12. CSS：双线凹凸边框
    • IE：border:2px outset; 。
    • FF： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080; 。

    推荐阅读


    上一篇：如何出好这份临床最常用的检验报告（看看专家指南怎么说）

    下一篇：cordova整合vue之后，引入极光推送插件，成功推送