今天在另一个同学的电脑上配置我写的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}; }