Goolge不能响应Canvas的内部对象

今天在另一个同学的电脑上配置我写的canvas内部事件响应，同样的浏览器版本，只不过我的是win7操作系统，他的是xp。结果我的谷歌浏览器就可以处理内部逻辑，他的就不行。于是逐行代码检查，最后发现问题出现在

function getEventPosition(ev){
  	var x, y;
  	if (ev.layerX || ev.layerX == 0) {
    	x = ev.layerX;
    	y = ev.layerY;
 	}else if (ev.offsetX || ev.offsetX == 0) { // Opera
    	x = ev.offsetX;
    	y = ev.offsetY;
  	}
  	return {x: x, y: y};
}

 这个函数上。在win7中，使用ev.layerX得到的是Canvas中的坐标，但是在XP中，使用相同的方法得到的是屏幕中的坐标，这就导致了尽管浏览器都是谷歌浏览器的最新版本，但是一个可以获得正确的坐标来处理，另一个却因为得到的坐标不吻合而不能执行。

 

解决方法为使用ev.offsetX即可，即将if-else下面的部分调到上面来。

function getEventPosition(ev){
  	var x, y;
  	if (ev.offsetX || ev.offsetX == 0) { // Opera
    	x = ev.offsetX;
    	y = ev.offsetY;
  	}else if (ev.layerX || ev.layerX == 0) {
    	x = ev.layerX;
    	y = ev.layerY;
 	}
  	return {x: x, y: y};
}