クリック

クリック (Web)

[55] クリック (click) は、マウスボタンを押下し、 直ちに元に戻す操作です。 Web においてはクリック要素活性化動作を呼び出す重要な手段として用いられているため、 実際のマウスボタンの押下が行われなくても、それに類する操作もクリックとして扱われています。

仕様書

クリック操作

[49] Web におけるクリックおよびそれに相当する操作には、次のものがあります。

入力装置のクリック

[38] クリックによってフォーカスを与える動作 (click-focusing behavior) は、 通常はクリックより前 (マウスボタンを最初に押下した時) に発生します >>33

[35] 指示装置 (pointing device) クリックされた時には、 真正クリック活性化手順を走らせなければなりません >>33

[57] 文脈メニューの表示など、マウスボタンや同時に押す鍵盤上のキーの有無などによって挙動が変化することもあります。 クリックの回数 (ダブルクリックトリプルクリックなど) によって挙動が異なることもあります。

[36] 対象の決定については、hit testing 参照。

[67] クリックは、マウスボタンの押下の後、ただちに元に戻す操作です。 つまり mousedownmouseupクリックに前後して発生します。 他に、ダブルクリックDnDフォーカス移動や選択の変化などのイベントも発生する場合があります。

活性化動作の指示

[53] 利用者クリック以外の方法 (鍵盤入力、音声入力など) で活性化動作を実行させる時は、その interaction event既定動作は、当該要素における click イベント発火としなければなりません >>52

[54] 従って Enter押下タッチ、 音声命令による選択などもクリックしたことなり得ます。 ボタン上での Space押下活性化動作を実行する場合、 これもクリック相当となります。
[59] 具体的に何が該当するかはプラットフォームの慣習によるため、 仕様書では明記されていません。また要素の種類にもよります。 例えば Enterボタンリンクではクリックに当たりますが、 通常の要素では (onclick があったとしても) クリックに当たりません。 (鍵盤イベント参照。)

[75] かつては合成クリック活性化手順でした。

HTMLElement インターフェイス click メソッド

[9] HTMLElement インターフェイスclick メソッドは、 当該要素クリックしたことにするものです。

動作

[78] click メソッドは、次のようにしなければなりません >>8

  1. [79] 文脈オブジェクトフォーム制御子で、 無効化なら、
    1. [80] ここで停止します。
  2. [81] 文脈オブジェクトclick in progress flagなら、
    1. [82] ここで停止します。
  3. [83] 文脈オブジェクトにおいて合成マウスイベントを発火します。 イベント型click信頼しないフラグは、とします。
  4. [85] 文脈オブジェクトclick in progress flag を、に設定します。

[77] 要素は、 click in progress flag を持ちます。初期値はです。 >>8

[11] このメソッド引数がなく、返す値もありません >>8

[28] このメソッドは、 当該要素合成クリック活性化手順を実行しなければなりません。 ただし、当該要素無効化されたフォーム制御子の場合には、 何もしてはなりません>>8

[27] 合成クリック活性化手順click メソッドに呼び出されたか否かで動作が変わります。 click メソッドによる呼び出しの場合には、 isTrustedとなります。

ラベル

[50] label 要素活性化動作は、 対応するフォーム制御子において合成クリック活性化手順を走らせることかもしれません。

label 要素も参照。
[51] プラットフォームの慣習に依存するとして HTML Standard は規定ではなく例示にとどめていますが、 多くの Webブラウザーはそのように動作するようです。すなわち、 label 要素に対するクリックは、 適用対象のフォーム制御子に対するクリックを発生させます。

既定ボタン

[47] フォーム既定ボタンによる暗示的なフォームの提出に対応する時は、 利用者が暗示的にフォームの提出を行ったら、 既定ボタンに対する合成クリック活性化手順を呼び出さなければなりません

既定ボタンも参照。
[48] 一般的にはフォーム制御子での Enter押下が暗示的なフォームの提出として実装されています。

命令

[45] menu 要素によって作られたメニューによって Action が実行される場合や menuitem 要素活性化動作により、 合成クリック活性化手順が実行されたり、 clickイベントを発火されたりすることがあります。

menu, menuitem, 命令を参照。
[46] WebブラウザーUI の一部であるメニュークリックを表していますが、 プラットフォームの慣習により、Enter キー押下なども含まれます。

click イベント

[42] 真正クリック活性化手順経由の click イベントでは、 イベントオブジェクトregion 属性の値は、 画布MouseEvent再経路付け手順で決定されたヒット領域ID (あれば) としなければなりません >>41

click イベントの発火

[25] click イベントを発火 (fire a click event) とは、 イベント型 clickbubble し、 キャンセル可能合成マウスイベントを発火することをいいます >>19

[40] この「発火」は、合成クリック活性化手順により、 または命令Action により呼び出されます。それ以外の方法で作られた click イベント (例えば著者スクリプトで作成され dispatch されるもの) には適用されません。

[32] イベントオブジェクトisTrusted 属性は、 合成クリック活性化手順click メソッドによって呼び出された場合には、 としなければなりません >>29。 それ以外の時はとします。

label 要素click メソッドにより間接的に呼び出された場合も isTrusted 属性としなければならないと思われます。
[58] この属性の値はポップアップ表示の可否location.replace の挙動にも関わります。

[44] イベントオブジェクトrelatedTarget 属性は、命令によって発火される場合には関係する要素に設定されます。

menu, menuitem, 命令を参照。

onclick イベントハンドラー属性

[1] HTML のほとんどの要素で用意されている onclick 属性は、 指示装置 (pointing device) のボタンが要素の上でかちっされた時に発生する事象に関する内在事象属性です。

[2] 仕様書:

代替

[3] 内在事象属性は表現と構造の分離の原則に反するので、 好ましくないと考える人もいます。また、 DOM 0 に基づく古い設計です。

代わりに、 script 要素などにより関連付けたスクリプト内で DOM 2 以上の事象に関するメソッド等が利用できます。 DOM 水準2 や DOM 水準 3 はこの属性に対応する DOM の事象 click を用意しています。

属性値

[4] この属性の値は %Script です。 SGML 的には CDATA です。スクリプト言語は、 Content-Script-Type によります。

[5] この属性は省略可能です。

[7]

使用ライブラリ:<a href="openex.js" onclick="return false" title="右クリックから保存">openex.js</a>

a 要素の活性化時の既定動作リンク探索ですが、 Webブラウザの操作により明示的にファイルとして保存させるために、 を返して既定動作を取消しています。

リンク右クリックしたらファイルとして保存を選べるという特定の Webブラウザの挙動に激しく依存したこのような記述は好ましくありません。

出典: (無題、2002年11月付け) http://mugi.cc/js/000912.htm

メモ

[12] onclick 属性問題について - IT戦記 (2008-05-24 20:47:14 +09:00 版) http://d.hatena.ne.jp/amachang/20080517/1210991851

信頼できるクリック

[61] ポップアップを認めるかどうかでは、利用者クリック等の処理の一部であるかどうかを判定基準とします。

[62] Locationupdate steps で通常の navigation (セッション履歴エントリーを作成する) とするか置換有効とするかの判定条件にも、 同様のものが使われます。

[63] ただし両者の判定基準は微妙に異なります。

[70] 詳しくは trusted を参照。

歴史

[13] Web Forms 2.0 ( 版) http://www.whatwg.org/specs/web-forms/current-work/#the-click

[10] click メソッドW3C DOM 時代は一部の要素にのみ定義されていましたが、 Web Applications 1.0 (現 HTML Standard) によりすべての HTML要素へと拡張されました。

[14] DSiブラウザーでは click をキャンセルするとフォーカスが出なくなるようです。また、フォーカスはイベント終了後に表示されるので、 onclick に時間がかかると表示までに時間がかかります。

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

[16] Web Applications 1.0 r7164 Fix a couple of places that misinvoked the default activation behaviour. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7163&to=7164

[17] Web Applications 1.0 r7596 Make click() have no effect on links in non-bc'ed docs. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7595&to=7596

[18] [whatwg] Resource loading in browsing context-less Documents ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-December/038407.html

[20] [whatwg] Resource loading in browsing context-less Documents ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040010.html

[21] Web Applications 1.0 r8050 Make .click() on certain elements not work if the document isn't active. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8049&to=8050

[22] [whatwg] Inert nodes and element.click() ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040051.html

[23] Web Applications 1.0 r8421 Make sure .click() doesn't fire on disabled form controls. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8420&to=8421

[24] Notifications API Standard ( ( 版)) http://notifications.spec.whatwg.org/#activating-a-notification

[26] The Platform for Privacy Preferences 1.0 (P3P1.0) Specification ( ( 版)) http://www.w3.org/TR/P3P/#Dynamic_Data

[60] Bug 27430 – Synthetic click activation for non activatable elements ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=27430#c6

[71] Ignore clicks on iframes that have moved in the last 200 ms · Issue #19 · WICG/interventions ( ()) https://github.com/WICG/interventions/issues/19

[72] Clicking issues - ChromeDriver - WebDriver for Chrome ( ()) https://sites.google.com/a/chromium.org/chromedriver/help/clicking-issues

クリックによる活性化

[6] ある要素における合成クリック活性化手順を走らせる (run synthetic click activation steps) とは、 当該要素クリック前活性化手順clickイベントの発火クリック後活性化手順を順に実行することです >>29

イベントオブジェクトisTrusted の値は呼び出し元により変わります。

[34] ある対象要素における真正クリック活性化手順を走らせる (run authentic click activation steps) とは、 クリック前活性化手順click イベントdispatchクリック後活性化手順を順に実行することです >>33。 ただし dispatch対象要素において、 その前後の手順は直近活性化可能要素において (直近活性化可能要素があれば) 実行します >>33

[39] この2つの手順は、 canvas 要素の動作 (>>36) と活性化動作の対象となる要素が異なります。 click イベントの発火方法が違っているのは、 HTML Standard が規定するか UI Events が規定するかの編集上の違いです。

[31] click イベント取り消しされた場合には、 クリック後活性化手順のかわりに取り消しされた活性化の手順を実行しなければなりません >>29, >>33

[30] 同じ要素合成クリック活性化手順真正クリック活性化手順を同時に (入れ子に) 実行することはできず (click in progress flag >>52)、 その場合には何もせずに終わらなければなりません >>29, >>33

[37] Stop overriding UIEvent's detail attribute (annevk著, ) https://github.com/whatwg/html/commit/bd3239b5b38a157a61cb570df5c80ad1dbc2b9d4

[56] Editorial: use "creating an event" more and refactor click() (annevk著, ) https://github.com/whatwg/html/commit/467b98781f82f6bf1a91fad435982ff27d8d9999

[64] Remove tabindex's synthetic click event feature (annevk著, ) https://github.com/whatwg/html/commit/35e3e1ec556de58da08d928ee033b7d10e91d1b9

[65] element click: use action primitives to define click steps (andreastt著, ) https://github.com/w3c/webdriver/commit/6666b4b33e843b75031b1036b68e06bb45757f20

[66] 27414 – Activation of <input> when mutability or type is changed () https://www.w3.org/Bugs/Public/show_bug.cgi?id=27414

[68] Synthetic click activation steps should state whether the event is composed or not · Issue #578 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/578

[69] 366945 - middle-clicking on a page starts a load based on clipboard contents (on unix-like hosts) () https://bugzilla.mozilla.org/show_bug.cgi?id=366945

[84] Add HTMLOrSVGElement interface mixin by annevk · Pull Request #3543 · whatwg/html () https://github.com/whatwg/html/pull/3543

[86] Specify synthetic mouse event name for click() (CYBAI著, ) https://github.com/whatwg/html/commit/6c7c5a73d602a1d2dce18e8484cb22e086a767ff

[87] "Fire a synthetic mouse event at this element" for click() is underspecified · Issue #4451 · whatwg/html () https://github.com/whatwg/html/issues/4451

[88] Specify syntatic mouse event name for click() by CYBAI · Pull Request #4453 · whatwg/html () https://github.com/whatwg/html/pull/4453