javascript - 如何在网页中创建二维网格？

Question

如何在网页中创建网格 (10X10) 并允许用户单击网格中的任何位置并以大约一位十进制记录 (x,y) 位置，例如覆盖值 0.0~10.0 或 0.1~9.9？

谢谢！

Answer 1

使用 a<canvas>作为网格，并附加一个click事件监听器。

Answer 2

您可以使用鼠标事件对象的 clientX 和 clientY 属性记录鼠标点击：

document.addEventListener('click', function(event){event.clientX;event.clientY;}, false);

上面的代码只是一个演示，它甚至不是跨浏览器兼容的。event.clientX并event.clientY按住鼠标坐标。

Answer 3

演示

我使用了 jQuery 库。

var boxX = 0;
var boxY = 0;
var box = '<div class="box" />'; // define the .box element

for(var i = 0; i<100;i++){       // create 100 boxes
  $('#grid').append(box);
}

$('.box').on('click',function(){
  boxX = $(this).position().left;
  boxY = $(this).position().top;
  $(this).text('X='+ boxX +' , Y='+ boxY);
});

而不是.position()（从父元素获取元素位置）
，您可以使用.offset()从窗口边界获取元素偏移量。