当たり判定

Edit New

当たり判定

仕様書

hit testing

[64] 指示装置は、画面上の座標 (x, y) をプラットフォームを通じて Webブラウザーに通知します。 Webブラウザーは、その UI とプラットフォームの慣習次第のWebブラウザー依存の方法で、 どの閲覧文脈にこれを通知するか (あるいはどれにも通知しないか) を決定します。

[70] 指示装置は、 マウスやタッチパネルのような物理的な装置である場合もあれば、 プラットフォームの機能としてキーボード操作でエミュレートされている場合や、 WebDriver により仮想的に操作されている場合もあります。 指示装置

[52] 更には、閲覧文脈内の適当な要素を決定し、これを対象要素とします。 位置の決定は、 viewport を通じて画面に表示される画布内の要素の箱の位置と重なり具合によります。

[55] ただし、固定状態にあっては、無条件に対象を選択します Pointer Lock。

[53] ただし、対象要素となるのが canvas 要素なら、 画布MouseEvent再経路付け手順によって対象要素を決定しなければなりません >>51。

画布MouseEvent再経路付け手順はイベントオブジェクトの region 属性にも影響します。

[65] 対象要素となるのが画像写像の場合には、 どの写像が選択されるかに座標が影響します。

[56] クリックは、その他のプラットフォームの慣習に基づく動作を発生させることがあります。 例えば、 input 要素の値の変更 (<input type=range> や日時系の制御子)、 select 要素のプルダウンメニューの表示、 スクロールバーの操作などが実行されるかもしれません。

[66] 座標は MouseEvent インターフェイスを通じてイベントリスナーに通知されます。

Document オブジェクト elementFromPoint メソッド

[7] Document オブジェクトの elementFromPoint メソッドは、 指定された座標に存在する要素を返します。

[14] 指定された座標で一番上にレンダリングされている要素が返されます。

[15] 座標が viewport 外にあるときや根要素が存在しない時には null が返されます。

pointer-events プロパティー

pointer-events: none

[68] pointer-events: none を指定すると、当該要素はマウスイベントに反応しなくなります。

[69] cursor の指定も、無視されます。

歴史

elementFromPoint

[50] 昔から実装されていました。

[8] 2007年6月に CSSOM ではじめて定義されました。

[3] csswg/cssom/Overview.src.html - diff - 1.42 ( ( 版)) http://dev.w3.org/cvsweb/csswg/cssom/Overview.src.html.diff?r1=1.41&r2=1.42&f=h

[9] 2007年12月に新設の CSSOM View 仕様書に移動しました。

[12] elementFromPoint ( 版) http://msdn.microsoft.com/ja-jp/library/cc428046.aspx

[16] WinIE8 は負の座標でも文書要素を返します。

[1] Opera は Text を返すことがあります。

[10] Firefox は3以降で実装しています。

[2] document.elementFromPoint - MDC Doc Center ( ( 版)) https://developer.mozilla.org/en/DOM/document.elementFromPoint

hit testing

[13] W3C DOM Compatibility - CSS Object Model View ( ( 版)) http://www.quirksmode.org/dom/w3c_cssom.html#t20

[17] Advanced hit testing (Windows) ( ( 版)) http://msdn.microsoft.com/en-us/library/ie/hh673523(v=vs.85).aspx

[27] The 'pointer-events' property ( 版) http://webkit.org/specs/PointerEventsProperty.html

[28] Bug 11395 - allow the SVG pointer-events CSS property in HTML ( 版) https://bugs.webkit.org/show_bug.cgi?id=11395

[29] Bug 380573 – implement SVG 'pointer-events' property for all elements ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=380573

[30] Safari CSS Reference (Apple Inc. 著, 版) http://74.125.155.132/search?q=cache:GKZpflf2OcMJ:developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/SafariCSSRef.pdf#133

[31] Proposal for CSS 'pointer-events' property (Dean Jackson 著, 版) http://lists.w3.org/Archives/Public/www-style/2008Jul/0428.html

[32] [whatwg] Non-blocking SVG Canvas? ( 版) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/027669.html

[33] Bug 380573 – implement SVG 'pointer-events' property for all elements ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=380573

[34] Bug 11395 – allow the SVG pointer-events CSS property in HTML ( 版) https://bugs.webkit.org/show_bug.cgi?id=11395

[35] The 'pointer-events' property ( 版) http://webkit.org/specs/PointerEventsProperty.html

[36] pointer-events for HTML in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog ( ( 版)) http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/

[37] Re: Proposal for CSS 'pointer-events' property ( (Ian Hickson 著, 版)) http://lists.w3.org/Archives/Public/www-style/2009Feb/0287.html

[38] Specifying hit testing in CSS ( (Leif Arne Storset 著, 版)) http://lists.w3.org/Archives/Public/www-style/2010Aug/0407.html

[39] IRC logs: freenode / #whatwg / 20110727 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110727#l-379

[40] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 版)) http://dev.w3.org/csswg/css3-ui/#pointer-events

[41] CSS Hit Testing Module ( ( 版)) http://people.opera.com/lstorset/TR/pointer-events/ED-pointer-events-20100820.html

[42] Re: Specifying hit testing in CSS ( (Leif Arne Storset 著, 版)) http://lists.w3.org/Archives/Public/www-style/2010Aug/0515.html

[43] Re: Proposal for CSS 'pointer-events' property ( (Ian Hickson 著, 版)) http://lists.w3.org/Archives/Public/www-style/2009Feb/0287.html

[18] csswg: changeset 4114:a1df2525134e ( ( 版)) https://dvcs.w3.org/hg/csswg/rev/a1df2525134e

[19] IRC logs: freenode / #whatwg / 20130412 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130412#l-386

[20] SVG:Language:Regrets - MozillaWiki ( ( 版)) https://wiki.mozilla.org/SVG:Language:Regrets#The_values_for_the_.27pointer-events.27_property

[21] IRC logs: freenode / #whatwg / 20120609 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120609

[22] Specifying hit testing in CSS ( (Leif Arne Storset 著, 版)) http://lists.w3.org/Archives/Public/www-style/2010Aug/0407.html

[23] Re: Proposal for CSS 'pointer-events' property ( (Ian Hickson 著, 版)) http://lists.w3.org/Archives/Public/www-style/2009Feb/0287.html

[24] HTML Standard ( 版) https://html.spec.whatwg.org/#image-map

[25] Introduction – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermHitTesting

[26] IRC logs: freenode / #whatwg / 20141101 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20141101#l-62

[44] [] (0) Filling in the rendering section: remove hit testing (see www-… · whatwg/html@fceda3f (10 Feb 2009) https://github.com/whatwg/html/commit/fceda3f08e335de7b9f9255a5e27a8cc7f160694

[45] If a user clicks on <button><i>hello</i></button>, does the event bubble to the document? · Issue #737 · whatwg/html ( 版) https://github.com/whatwg/html/issues/737

[46] Difference between region behavior for MouseEvent and Touch · Issue #548 · whatwg/html ( 版) https://github.com/whatwg/html/issues/548

[47] Re: Proposal for CSS 'pointer-events' property (Ian Hickson 著, 版) https://lists.w3.org/Archives/Public/www-style/2009Feb/0287.html

[48] Linking: borrow HTML attributes, explicitly allow nested links, cleanup ( (AmeliaBR著, )) https://github.com/w3c/svgwg/commit/33f85d2bdd20e7d33eedff77b85b10c8451db397

[49] Specify the Event Loop integration for various non-deprecated events, incl. hit testing · Issue #23 · w3c/uievents () https://github.com/w3c/uievents/issues/23

[54] Remove canvas element's hit region feature (for now) (annevk著, ) https://github.com/whatwg/html/commit/9d493a37ed7e49c58522a3fed05d14bde1a8913c

[57] Clarify the hit test and capturing target for boundary events (#154) (NavidZ著, ) https://github.com/w3c/pointerevents/commit/91b660867545d87b5663170b2ad95aa7da69edab

[58] Mouse events & disabled form controls · Issue #2368 · whatwg/html () https://github.com/whatwg/html/issues/2368

[59] in view: test with pointer events enabled (andreastt著, ) https://github.com/w3c/webdriver/commit/ba6ee925b5bc85938d542d65ef5034a761fe73d7

[60] Align the title attribute with implementations by annevk · Pull Request #3435 · whatwg/html () https://github.com/whatwg/html/pull/3435

[61] Add note to mention UA might adjusting touch target (#95) (EiraGe著, ) https://github.com/w3c/touch-events/commit/279f64e255ac76fa47fc4510d2df9e68faf9590a

[62] Should spec mention “touch adjustment" behavior? · Issue #93 · w3c/touch-events () https://github.com/w3c/touch-events/issues/93

[63] Add note to mention UA might adjusting touch target by EiraGe · Pull Request #95 · w3c/touch-events () https://github.com/w3c/touch-events/pull/95

[67] Clarify hit testing behavior of <foreignObject> · Issue #427 · w3c/svgwg () https://github.com/w3c/svgwg/issues/427

Updated: