[55] [DFN[[RUBYB[[[クリック]]]@en[click]]]]は、[[マウス]]の[[ボタン]]を押下し、 直ちに元に戻す操作です。 [[Web]] においては[[クリック]]は[[要素]]の[[活性化動作]]を呼び出す重要な手段として用いられているため、 実際の[[マウスボタン]]の押下が行われなくても、それに類する操作も[[クリック]]として扱われています。 * 仕様書 [REFS[ - [19] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2013-05-05 06:42:10 +09:00]] 版) - [52] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) -- [29] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) -- [33] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) -- [8] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) - [41] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) ]REFS] * クリック操作 [49] [[Web]] における[[クリック]]およびそれに相当する操作には、次のものがあります。 ** 入力装置のクリック ;; [38] [RUBYB[[[クリック]]によって[[フォーカス]]を与える動作]@en[click-focusing behavior]]は、 通常は[[クリック]]より前 ([[マウスボタン]]を最初に押下した時) に発生します [SRC[>>33]]。 [35] [RUBYB[[[指示装置]]]@en[pointing device]]が[[クリック]]された時には、 [[真正クリック活性化手順]]を走らせなければ[['''なりません''']] [SRC[>>33]]。 [57] [[文脈メニュー]]の表示など、[[マウスボタン]]や同時に押す[[鍵盤]]上の[[キー]]の有無などによって挙動が変化することもあります。 [[クリック]]の回数 ([[ダブルクリック]]、[[トリプルクリック]]など) によって挙動が異なることもあります。 [36] 対象の決定については、[[hit testing]] 参照。 [67] [[クリック]]は、[[マウス]]の[[ボタン]]の押下の後、ただちに元に戻す操作です。 つまり [CODE(DOMe)@en[mousedown]] と [CODE(DOMe)@en[mouseup]] が[[クリック]]に前後して発生します。 他に、[[ダブルクリック]]や[[DnD]]、[[フォーカス]]移動や[[選択]]の変化などの[[イベント]]も発生する場合があります。 ;; [[マウスイベント]]参照。 ** 活性化動作の指示 [53] [[利用者]]が[[クリック]]以外の方法 ([[鍵盤]]入力、[[音声]]入力など) で[[活性化動作]]を実行させる時は、その [[interaction event]] の[[既定動作]]は、当該[[要素]]における [CODE(DOMe)@en[click]] [[イベント]]の[[発火]]としなければ[MUST[なりません]] [SRC[>>52]]。 ;; [54] 従って [KEY@en[[[Enter]]]] の[[押下]]や[[タッチ]]、 音声命令による選択なども[[クリック]]したことなり得ます。 [[ボタン]]上での [KEY@en[[[Space]]]] の[[押下]]で[[活性化動作]]を実行する場合、 これも[[クリック]]相当となります。 ;; [59] 具体的に何が該当するかは[[プラットフォームの慣習]]によるため、 [[仕様書]]では明記されていません。また[[要素]]の種類にもよります。 例えば [KBD[[[Enter]]]] は[[ボタン]]や[[リンク]]では[[クリック]]に当たりますが、 通常の[[要素]]では ([CODE(HTMLa)@en[[[onclick]]]] があったとしても) [[クリック]]に当たりません。 ([[鍵盤イベント]]参照。) [HISTORY[ [75] かつては[[合成クリック活性化手順]]でした。 ]HISTORY] ** [CODE(DOMi)@en[HTMLElement]] [[インターフェイス]] [CODE(DOMm)@en[click]] メソッド [9] [CODE(DOMi)@en[[[HTMLElement]]]] [[インターフェイス]]の [DFN[[CODE(DOMm)@en[[[click]]]]]] [[メソッド]]は、 当該[[要素]]を[[クリック]]したことにするものです。 *** 動作 [78] [CODE(DOMm)@en[click]] [[メソッド]]は、次のようにしなければ[MUST[なりません]] [SRC[>>8]]。 [FIG(steps)[ = [79] [[文脈オブジェクト]]が[[フォーム制御子]]で、 [F[無効化]]が[[真]]なら、 == [80] ここで停止します。 = [81] [[文脈オブジェクト]]の [F[click in progress flag]] が[[真]]なら、 == [82] ここで停止します。 = [83] [[文脈オブジェクト]]において[[合成マウスイベントを発火]]します。 [VAR[[[イベント型]]]]は [CODE[click]]、 [VAR[信頼しないフラグ]]は、[[真]]とします。 = [85] [[文脈オブジェクト]]の [F[click in progress flag]] を、[[偽]]に設定します。 ]FIG] [77] [[要素]]は、 [DFN[[F[click in progress flag]]]] を持ちます。初期値は[[偽]]です。 [SRC[>>8]] ;; [11] この[[メソッド]]は[[引数]]がなく、返す値もありません [SRC[>>8]]。 [HISTORY[ [28] この[[メソッド]]は、 当該[[要素]]の[[合成クリック活性化手順]]を実行しなければ[['''なりません''']]。 ただし、当該[[要素]]が[[無効化]]された[[フォーム制御子]]の場合には、 何もしては[['''なりません''']]。 [SRC[>>8]] ;; [27] [[合成クリック活性化手順]]は [CODE(DOMm)@en[[[click]]]] [[メソッド]]に呼び出されたか否かで動作が変わります。 [CODE(DOMm)@en[[[click]]]] [[メソッド]]による呼び出しの場合には、 [CODE(DOMa)@en[[[isTrusted]]]] が[[偽]]となります。 ]HISTORY] ** ラベル [50] [CODE(HTMLe)@en[[[label]]]] [[要素]]の[[活性化動作]]は、 対応する[[フォーム制御子]]において[[合成クリック活性化手順]]を走らせることかもしれません。 ;; [CODE(HTMLe)@en[[[label]]]] [[要素]]も参照。 ;; [51] [[プラットフォームの慣習]]に依存するとして [[HTML Standard]] は規定ではなく例示にとどめていますが、 多くの [[Webブラウザー]]はそのように動作するようです。すなわち、 [CODE(HTMLe)@en[[[label]]]] [[要素]]に対する[[クリック]]は、 適用対象の[[フォーム制御子]]に対する[[クリック]]を発生させます。 ** 既定ボタン [47] [[フォーム]]の[[既定ボタン]]による暗示的な[[フォームの提出]]に対応する時は、 [[利用者]]が暗示的に[[フォームの提出]]を行ったら、 [[既定ボタン]]に対する[[合成クリック活性化手順]]を呼び出さなければ[['''なりません''']]。 ;; [[既定ボタン]]も参照。 ;; [48] 一般的には[[フォーム制御子]]での [KEY@en[[[Enter]]]] の[[押下]]が暗示的な[[フォームの提出]]として実装されています。 ** 命令 [45] [CODE(HTMLe)@en[[[menu]]]] [[要素]]によって作られた[[メニュー]]によって [[Action]] が実行される場合や [CODE(HTMLe)@en[[[menuitem]]]] [[要素]]の[[活性化動作]]により、 [[合成クリック活性化手順]]が実行されたり、 [[[CODE(DOMe)@en[click]]イベントを発火]]されたりすることがあります。 ;; [CODE(HTMLe)@en[[[menu]]]], [CODE(HTMLe)@en[[[menuitem]]]], [[命令]]を参照。 ;; [46] [[Webブラウザー]]の [[UI]] の一部である[[メニュー]]の[[クリック]]を表していますが、 [[プラットフォームの慣習]]により、[KEY[[[Enter]]]] [[キー]]の[[押下]]なども含まれます。 * [CODE(DOMe)@en[click]] イベント [42] [[真正クリック活性化手順]]経由の [CODE(DOMe)@en[[[click]]]] [[イベント]]では、 [[イベントオブジェクト]]の [CODE(DOMa)@en[[[region]]]] [[属性]]の値は、 [[画布[CODE(DOMi)@en[MouseEvent]]再経路付け手順]]で決定された[[ヒット領域]]の [[ID]] (あれば) としなければ[['''なりません''']] [SRC[>>41]]。 ;; [43] [[画布[CODE(DOMi)@en[MouseEvent]]再経路付け手順]]を経由しない[[合成クリック活性化手順]]や[[著者]]の[[スクリプト]]による [CODE(DOMe)@en[[[click]]]] [[イベント]]には適用されません。 ** [CODE(DOMe)@en[click]] イベントの発火 [25] [DFN[[RUBYB[[CODE(DOMe)@en[click]] イベントを発火]@en[fire a [CODE(DOMe)@en[click]] event]]]]とは、 [[イベント型]] [CODE(DOMe)@en[[[click]]]] で [[bubble]] し、 [[キャンセル可能]]な[[合成マウスイベントを発火]]することをいいます [SRC[>>19]]。 ;; [40] この「[[発火]]」は、[[合成クリック活性化手順]]により、 または[[命令]]の [[Action]] により呼び出されます。それ以外の方法で作られた [CODE(DOMe)@en[[[click]]]] [[イベント]] (例えば[[著者]]の[[スクリプト]]で作成され [[dispatch]] されるもの) には適用されません。 [32] [[イベントオブジェクト]]の [CODE(DOMm)@en[[[isTrusted]]]] [[属性]]は、 [[合成クリック活性化手順]]が [CODE(DOMm)@en[[[click]]]] [[メソッド]]によって呼び出された場合には、 [[偽]]としなければ[['''なりません''']] [SRC[>>29]]。 それ以外の時は[[真]]とします。 ;; [CODE(HTMLe)@en[[[label]]]] [[要素]]の [CODE(DOMm)@en[[[click]]]] [[メソッド]]により間接的に呼び出された場合も [CODE(DOMa)@en[[[isTrusted]]]] [[属性]]は[[偽]]としなければならないと思われます。 ;; [58] この[[属性]]の値は[[ポップアップ表示の可否]]や [CODE(JS)@en[[[location.replace]]]] の挙動にも関わります。 [44] [[イベントオブジェクト]]の [CODE(DOMa)@en[[[relatedTarget]]]] [[属性]]は、[[命令]]によって[[発火]]される場合には関係する[[要素]]に設定されます。 ;; [CODE(HTMLe)@en[[[menu]]]], [CODE(HTMLe)@en[[[menuitem]]]], [[命令]]を参照。 ** [CODE(HTMLa)@en[onclick]] イベントハンドラー属性 [1] [[HTML]] のほとんどの要素で用意されている [DFN[[CODE(HTMLa)[onclick]] 属性]]は、 [RUBYB[指示装置] [pointing device]]のボタンが[[要素]]の上で[[かちっ]]された時に発生する[[事象]]に関する[[内在事象]]属性です。 [2] 仕様書: - [[HTML 4]] -- [CODE(HTMLa)[onclick]] 属性 *** 代替 [3] 内在事象属性は[[表現と構造の分離]]の原則に反するので、 好ましくないと考える人もいます。また、 [[DOM 0]] に基づく古い設計です。 代わりに、 [CODE(HTMLe)[[[script]]]] 要素などにより関連付けたスクリプト内で [[DOM 2]] 以上の[[事象]]に関するメソッド等が利用できます。 DOM 水準2 や DOM 水準 3 はこの属性に対応する DOM の事象 [CODE(DOM)[[[click]]]] を用意しています。 *** 属性値 [4] この属性の値は [CODE(SGML)[%[[Script]]]] です。 [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。[[スクリプト言語]]は、 [CODE(HTTP)[[[Content-Script-Type]]]] によります。 [5] この属性は省略可能です。 *** 例 [7] [PRE(HTML deprecated example code)[ 使用ライブラリ:openex.js ]PRE] [CODE(HTMLe)[[[a]]]] 要素の[[活性化]]時の[[既定動作]]は[[リンク]]の[[探索]]ですが、 [[Webブラウザ]]の操作により明示的に[[ファイル]]として[[保存]]させるために、 [[偽]]を返して[[既定動作]]を取消しています。 [[リンク]]を[[右クリック]]したら[[ファイル]]として[[保存]]を選べるという特定の [[Webブラウザ]]の挙動に激しく依存したこのような記述は好ましくありません。 出典: (無題、2002年11月付け) *** メモ [12] [CITE[onclick 属性問題について - IT戦記]] ([CODE[2008-05-24 20:47:14 +09:00]] 版) * 信頼できるクリック [61] [[ポップアップ]]を認めるかどうかでは、[[利用者]]の[[クリック]]等の処理の一部であるかどうかを判定基準とします。 [62] [CODE(DOMi)@en[[[Location]]]] の [[update steps]] で通常の [[navigation]] ([[セッション履歴エントリー]]を作成する) とするか[[置換有効]]とするかの判定条件にも、 同様のものが使われます。 [63] ただし両者の判定基準は微妙に異なります。 [70] 詳しくは [[trusted]] を参照。 * 歴史 [13] [CITE@en-GB-x-Hixie[Web Forms 2.0]] ([TIME[2009-01-05 20:07:15 +09:00]] 版) [10] [CODE(DOMm)@en[[[click]]]] [[メソッド]]は [[W3C DOM]] 時代は一部の[[要素]]にのみ定義されていましたが、 [[Web Applications 1.0]] (現 [[HTML Standard]]) によりすべての [[HTML要素]]へと拡張されました。 [14] [[DSiブラウザー]]では [CODE(DOM絵)@en[[[click]]]] をキャンセルするとフォーカスが出なくなるようです。また、フォーカスはイベント終了後に表示されるので、 onclick に時間がかかると表示までに時間がかかります。 [15] [CITE[IRC logs: freenode / #whatwg / 20120609]] ( ([TIME[2012-06-28 21:17:45 +09:00]] 版)) [16] [CITE@en[Web Applications 1.0 r7164 Fix a couple of places that misinvoked the default activation behaviour.]] ( ([TIME[2012-06-30 08:20:00 +09:00]] 版)) [17] [CITE@en[Web Applications 1.0 r7596 Make click() have no effect on links in non-bc'ed docs.]] ( ([TIME[2012-12-20 05:11:00 +09:00]] 版)) [18] [CITE[''''''[''''''whatwg'''''']'''''' Resource loading in browsing context-less Documents]] ( ([TIME[2012-12-20 04:51:06 +09:00]] 版)) [20] [CITE[''''''[''''''whatwg'''''']'''''' Resource loading in browsing context-less Documents]] ( ([TIME[2013-07-12 01:53:37 +09:00]] 版)) [21] [CITE@en[Web Applications 1.0 r8050 Make .click() on certain elements not work if the document isn't active.]] ( ([TIME[2013-07-12 10:53:00 +09:00]] 版)) [22] [CITE[''''''[''''''whatwg'''''']'''''' Inert nodes and element.click()]] ( ([TIME[2013-07-13 09:28:35 +09:00]] 版)) [23] [CITE@en[Web Applications 1.0 r8421 Make sure .click() doesn't fire on disabled form controls.]] ( ([TIME[2014-01-28 04:04:00 +09:00]] 版)) [24] [CITE@en-US[Notifications API Standard]] ( ([TIME[2014-02-11 16:20:34 +09:00]] 版)) [26] [CITE[The Platform for Privacy Preferences 1.0 (P3P1.0) Specification]] ( ([TIME[2002-04-16 22:03:48 +09:00]] 版)) [60] [CITE@en[Bug 27430 – Synthetic click activation for non activatable elements]] ([TIME[2015-07-07 12:00:17 +09:00]] 版) [71] [CITE@en[Ignore clicks on iframes that have moved in the last 200 ms · Issue #19 · WICG/interventions]] ( ([TIME[2016-06-15 16:09:40 +09:00]])) [72] [CITE[Clicking issues - ChromeDriver - WebDriver for Chrome]] ( ([TIME[2016-08-05 07:21:42 +09:00]])) ** クリックによる活性化 [6] ある[[要素]]における[DFN[[RUBYB[合成クリック活性化手順を走らせる]@en[run synthetic click activation steps]]]]とは、 当該[[要素]]の[[クリック前活性化手順]]、 [[[CODE(DOMe)@en[click]]イベントの発火]]、 [[クリック後活性化手順]]を順に実行することです [SRC[>>29]]。 ;; [[イベントオブジェクト]]の [CODE(DOMm)@en[[[isTrusted]]]] の値は呼び出し元により変わります。 [34] ある[[対象要素]]における[DFN[[RUBYB[真正クリック活性化手順を走らせる]@en[run authentic click activation steps]]]]とは、 [[クリック前活性化手順]]、 [CODE(DOMe)@en[[[click]]]] [[イベント]]の [[dispatch]]、 [[クリック後活性化手順]]を順に実行することです [SRC[>>33]]。 ただし [[dispatch]] は[[対象要素]]において、 その前後の手順は[[直近活性化可能要素]]において ([[直近活性化可能要素]]があれば) 実行します [SRC[>>33]]。 ;; [39] この2つの手順は、 [CODE(HTMLe)@en[[[canvas]]]] [[要素]]の動作 (>>36) と[[活性化動作]]の対象となる[[要素]]が異なります。 [CODE(DOMe)@en[[[click]]]] [[イベント]]の発火方法が違っているのは、 [[HTML Standard]] が規定するか [[UI Events]] が規定するかの編集上の違いです。 [31] [CODE(DOMe)@en[[[click]]]] [[イベント]]が[[取り消し]]された場合には、 [[クリック後活性化手順]]のかわりに[[取り消しされた活性化の手順]]を実行しなければ[['''なりません''']] [SRC[>>29, >>33]]。 [30] 同じ[[要素]]で[[合成クリック活性化手順]]や[[真正クリック活性化手順]]を同時に (入れ子に) 実行することはできず ([[click in progress flag]] [SRC[>>52]])、 その場合には何もせずに終わらなければ[['''なりません''']] [SRC[>>29, >>33]]。 [POSTAMBLE[ [76] ... というかつての [[HTML Standard]] の規定がありましたが、 [[DOM Standard]] の [[dispatch]] 側であらゆる [CODE(DOMe)@en[click]] [[イベント]]において[[活性化動作]]が実行されるように変更されたため、 [[HTML]] 側からは削除されました。 [REFS[ - [73] [CITE@en[Editorial: major cleanup around firing and dispatching events]] ([[annevk]]著, [TIME[2016-10-19 01:00:43 +09:00]]) - [74] [CITE@en[Align activation behavior with changes to DOM Standard]] ([[annevk]]著, [TIME[2016-10-21 00:06:40 +09:00]]) ]REFS] ]POSTAMBLE] ** [37] [CITE@en[Stop overriding UIEvent's detail attribute]] ([[annevk]]著, [TIME[2016-10-25 19:00:16 +09:00]]) [56] [CITE@en[Editorial: use "creating an event" more and refactor click()]] ([[annevk]]著, [TIME[2016-10-29 03:23:16 +09:00]]) [64] [CITE@en[Remove tabindex's synthetic click event feature]] ([[annevk]]著, [TIME[2016-11-04 00:03:54 +09:00]]) [65] [CITE@en[element click: use action primitives to define click steps]] ([[andreastt]]著, [TIME[2017-01-26 04:10:19 +09:00]]) [66] [CITE@en[27414 – Activation of when mutability or type is changed]] ([TIME[2017-07-23 16:41:32 +09:00]]) [68] [CITE@en[Synthetic click activation steps should state whether the event is composed or not · Issue #578 · w3c/webcomponents]] ([TIME[2017-09-09 16:17:31 +09:00]]) [69] [CITE@en[366945 - middle-clicking on a page starts a load based on clipboard contents (on unix-like hosts)]] ([TIME[2017-09-09 17:53:08 +09:00]]) [84] [CITE@en[Add HTMLOrSVGElement interface mixin by annevk · Pull Request #3543 · whatwg/html]] ([TIME[2018-03-24 18:06:15 +09:00]]) [86] [CITE@en[Specify synthetic mouse event name for click()]] ([[CYBAI]]著, [TIME[2019-03-29 05:20:13 +09:00]]) [87] [CITE@en["Fire a synthetic mouse event at this element" for click() is underspecified · Issue #4451 · whatwg/html]] ([TIME[2019-08-14 11:26:50 +09:00]]) [88] [CITE@en[Specify syntatic mouse event name for click() by CYBAI · Pull Request #4453 · whatwg/html]] ([TIME[2019-08-14 11:27:01 +09:00]]) [89] [CITE@en[Revamp the user activation model]] ([[mustaqahmed]], [TIME[2019-12-05 04:09:23 +09:00]], [TIME[2022-01-19T09:33:51.000Z]])