Opera坚定的走了ie6 7的道路,它拥有
event.offsetX
event.offsetY
event.clientX
event.clientY
event.x
event.y
差点就和ie一模一样,幸好它有pageX,pageY
event.pageX
event.pageY
注意:Chrome和Safari,以及 Opera 的event.x event.y 都跟IE6 7 的表现一致,它们和event.clientX,event.clientY相等,
而在ie8中,event.x,event.y 则等同于 其他浏览器的event.pageX,event.pageY
为啥米layerX和offsetX, x,和pageX会在某些浏览器里重复出现捏?
因为W3C并没有标准化这些属性,DOM3草案里MouseEvent部分沿用了DOM2的定义,只有两对属性
clientX of type long, readonly
The horizontal coordinate at which the event occurred relative to the viewport associated with the event.
clientY of type long, readonly
The vertical coordinate at which the event occurred relative to the viewport associated with the event
screenX of type long, readonly
The horizontal coordinate at which the event occurred relative to the origin of the screen coordinate system.
screenY of type long, readonly
The vertical coordinate at which the event occurred relative to the origin of the screen coordinate system.
这下杯具了,所以支持标准的浏览器们都木有了方向,但是吧,浏览器厂商转念一想,W3C反正也弄不出幺蛾子来,肯定从offsetXY 和 layerXY,
pageXY 和 xy中间挑一个,于是为了迎合标准,就把这两对属性就都放进了浏览器中。
不管怎么样,出了问题总是要解决掉。看到上面的兼容报告,代码雏形也就做好了
我们开始动手写!
getEventCoord
1 var getEventCoord = function( e )
2 {
3 var evt = e||event;
4 var html = document.documentElement; //滚动条在<HTML>上
5 return {
6
7 //如果pageX属性为真 就使用pageX,否则就使用 clientX + html.scrollLeft
8 pageX : evt.pageX || evt.clientX + html.scrollLeft,
9
10 //如果pageY属性为真 就使用pageY,否则就使用 clientY + html.scrollTop
11 pageY : evt.pageY || evt.clientY + html.scrollTop,
12
13 //clientX Y 大家都一致,木有悬念
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //如果layerX属性为真 就使用layerX,否则就使用 offsetX
18 layerX : evt.layerX || evt.offsetX,
19
20 //如果layerY属性为真 就使用layerY,否则就使用 offsetY
21 layerY : evt.layerY || evt.offsetY
22 }
23 }
用法如下
document.onmousemove = function( e )
{
var coord = getEventCoord(e);
document.title = [coord.pageX,coord.pageY];
}
看起来已经灰常的OK,似乎已经能满足日常工作需要了,但还是存在几个问题
1.不严谨
使用 evt.pageX || evt.clientX + html.scrollLeft 这种判断,
只要evt.pageX 等于 undefined,null,NaN,'',0,false 这些值,左边的表达式结果就为false,从而计算右边的表达式并返回表达式的值,










