javascript - Web ページで 2D グリッドを作成するには?

Question

Web ページにグリッド (10X10) を作成し、ユーザーがグリッド内の任意の位置をクリックして、(x,y) の位置を 0.0 ~ 10.0 または 0.1 ~ 9.9 の値をカバーするなど、10 進数で記録できるようにするにはどうすればよいですか?

ありがとう！

Answer 1

<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()