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

仕様書

クリック操作

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

入力装置のクリック

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

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

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

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

[67] クリックは、マウスのボタンの押下の後、ただちに元に戻す操作です。 つまり mousedown と mouseup がクリックに前後して発生します。 他に、ダブルクリックや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。

[43] 画布MouseEvent再経路付け手順を経由しない合成クリック活性化手順や著者のスクリプトによる click イベントには適用されません。

click イベントの発火

[25] click イベントを発火fire a click eventとは、 イベント型 click で bubble し、 キャンセル可能な合成マウスイベントを発火することをいいます >>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] Location の update 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。

[76] ... というかつての HTML Standard の規定がありましたが、 DOM Standard の dispatch 側であらゆる click イベントにおいて活性化動作が実行されるように変更されたため、 HTML 側からは削除されました。

  • [73] Editorial: major cleanup around firing and dispatching events (annevk著, ) https://github.com/whatwg/html/commit/8ffbd146d4709057e45dd6cfc81e7a70897050c5
  • [74] Align activation behavior with changes to DOM Standard (annevk著, ) https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab

[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

[89] Revamp the user activation model (mustaqahmed, , ) https://github.com/whatwg/html/commit/8f8c1f50158736b3cf16188377a0974a20367c8b