javascript-当浏览器窗口缩小/移动时,画布单击事件搞砸了

我一直在用HTML5 Canvas创建一个六边形网格.我有一个基本的网格,如果您单击一个十六进制,它将突出显示该十六进制(此处的演示：http://cfiresim.com/hex-map-game-reboot/test.html)

在javascript中,我将画布定义为这样(为简洁起见,省略了某些部分)：

 var hex = {};
 hex.canvas = document.getElementById("HexCanvas");
 hex.ctx = null;
 console.log("Initializing new game...");
 this.radius = 20;
 this.side = Math.round((3 / 2) * this.radius);
 this.height = Math.round(Math.sqrt(3) * this.radius);
 this.width = Math.round(2 * this.radius);

 //Set Size of main div to size of canvas
 $('#primary-panel').css('height', (hex.height * hex.rows)+hex.height*2);
 hex.canvas.style.width='100%';
 hex.canvas.style.height='100%';
 hex.canvas.width  = hex.canvas.offsetWidth;
 hex.canvas.height = hex.canvas.offsetHeight;

 //Set click eventlistener for canvas
 this.canvas.addEventListener("mousedown", this.clickEvent.bind(this), false);

 this.ctx = this.canvas.getContext('2d');

所有代码都可以在这里找到：https://github.com/boknows/hex-map-game-reboot

我的主要问题是：当通过浏览器调整画布大小时,是否有一种特定的方法来防止单击事件变得毫无用处？例如,如果将浏览器缩小到仅大于网格的大小,则单击时不会在正确的位置注册.我是否缺少画布的某些功能？也许getSelectedTile()定义不正确？

编辑：这似乎主要发生在浏览器稍微滚动一下,从而将网格移出屏幕时.然后,点击会记录一个怪异的偏移量,我猜这等于屏幕滚动的距离.忠告？

解决方法:

您必须考虑页面滚动的位置.

在HexagonGrid.js中,代替此：

hex.clickEvent = function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;

做这个：

hex.clickEvent = function(e) {
        var mouseX = e.pageX - window.pageXOffset;
        var mouseY = e.pageY - window.pageYOffset;