- ベストアンサー
指定要素のクリック位置を取得する方法
- 指定要素のクリック位置を取得する方法について解説します。
- 子要素上でクリックした場合に子要素の左端からの位置になってしまう問題を解決する方法をご紹介します。
- id=divboxの半分の位置でクリックしたときに子要素に影響されずに300前後を取得できる方法を説明します。
- localhosts
- お礼率45% (5/11)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
event.offsetX の定義はイベントターゲットのパディング辺からの距離です。 WebKit 系に限定するなら、布置要素のボーダー辺からの距離（感知範囲はボーダーボックス）を返す event.layer(X|Y) があります。ただし、これは NN4 由来で Firefox もサポートしてはいますが、現状で標準化案すらありません。いつ廃止されてもおかしくないことを念頭に置いて下さい。 <div id="DIVBOX" onclick="alert ([ event.layerX, event.layerY ]); " style="position: relative"> ... </div> もし #divbox 内に別の布置要素（例えば絶対配置された要素）がありうるなら No.1 の考え方で良いのですが、若干面倒な問題があります。現行の WebKit 系なら getBoundingClientRect() があるので以下の方が無難と考えます。これは event.client(X|Y) と同じく表示域から、ボーダー辺までの距離を得られます。 <div id="DIVBOX" onclick=" var b = event.currentTarget.getBoundingClientRect (); alert ([event.clientX - b.left, event.clientY - b.top ]); "> ... </div> --- なお、IE を考慮してスクロール量を得るときは面倒でも document.compatMode で標準・互換モードを確認して下さい。No.1 の方法では、CSS の書き方によっては不具合が生じます。IE を考慮しないなら window.scroll(X|Y) または page(X|Y)Offset で十分です。 関連して、No.0 の HTML の書き方は間違っているので必ずチェックして下さい。そのままでは互換モードになります。
その他の回答 (1)
- my--
- ベストアンサー率89% (91/102)
//for Prototype: cumulativeOffset function cumulativeOffset(element) { var valueT = 0, valueL = 0; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; element = element.offsetParent; } while (element); return { x: valueL, y: valueT }; } //クライアント領域における要素位置 function clientOffset(element) { var de = document.documentElement, db = document.body; var top = de.scrollTop || (db ? db.scrollTop : 0); var left = de.scrollLeft || (db ? db.scrollLeft : 0); var obj = cumulativeOffset(element); return { x: obj.x - left, y: obj.y - top }; } onclick=" var obj = clientOffset(this); alert('左端から' + (event.clientX - obj.x) + '上端から' + (event.clientY - obj.y)); "
お礼
回答ありがとうございます。 2つ下の質問 『重なった要素上でのイベントで下層要素を特定したい』 http://okwave.jp/qa/q6316242.html を見たところ /* p 要素をスルーして背面の要素にマウスイベントを通知する */ p { pointer-events: none } このようなものがありました！ cssでdivboxの子要素にpointer-events: noneを指定してみたところ 説明どおり子要素をスルーしてdivboxのevent.offsetXが取得できました。 ここを訪れた人の参考になると幸いです。 ※pointer-events: none;の対応ブラウザには注意してください
お礼
回答ありがとうございます。 event.layerXで解決しました！ 廃止されないことを祈ろう・・・
補足
<!DOCTYPE html>で標準モード