本日はJQueryを使用してクリックした位置の座標を取得を解説していきたいと思います。
それでは行ってみましょう！
Menu
ブラウザのクリックした位置座標を取得
clientXとclientYで座標取得（ブラウザ）
ブラウザをクリックすると座標が下記のテキストボックスに表示されます(^^♪
ブラウザのクリック位置 →
1 | ブラウザのクリック位置 <input type="text" class="text12366"> |
1 2 3 | $(window).click(function(e) { $(".text12366").val("client : X" + e.clientX + " : Y" + e.clientY); }); |
ブラウザ内をクリックする度にクリックイベントが発動され、ブラウザの左上を基準にイベントオブジェクトのclientXプロパティでX座標（横）とY座標（縦）を取得して指定したHTMLに表示されます。
指定位置内をクリックして座標を取得
offsetXとoffsetYで指定範囲の座標を取得
赤のBOX内をクリックで座標が表示されます(^O^)
1 | <p>赤のBOX</p><div class="zahyou1"></div> |
1 2 3 4 | //赤のBOX内のクリック位置の座標を取得 $(".zahyou1").click(function(e) { $(".zahyou1").text("offset : X" + e.offsetX + " : Y" + e.offsetY); }); |
赤のBOX内をクリックする度にクリックイベントが発動され、赤のBOXの左上を基準にイベントオブジェクトのoffsetプロパティでX座標（横）とY座標（縦）を取得して指定したHTMLに表示されます。
まとめ
備忘録として復習も兼ねて取得まで実施しましたが、何に使用しましょうか…
あまり使用する機会がないので悩むところです。
以上です。
