Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [19] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2013-05-05 06:42:10 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#fire-a-click-event>
- [52] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) <https://html.spec.whatwg.org/#activation>
-- [29] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) <https://html.spec.whatwg.org/#run-synthetic-click-activation-steps>
-- [33] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) <https://html.spec.whatwg.org/#run-authentic-click-activation-steps>
-- [8] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) <https://html.spec.whatwg.org/#dom-click>
- [41] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-01-30 08:05:01 +09:00]] 版) <https://html.spec.whatwg.org/#canvas-mouseevent-rerouting-steps>
]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]] 属性
<IW:HTML4:"interact/scripts.html#adef-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)[
使用ライブラリ:<a href="openex.js" onclick="return false" title="右クリックから保存">openex.js</a>
]PRE]

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

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

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

*** メモ

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

* 信頼できるクリック

[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]] 版) <http://www.whatwg.org/specs/web-forms/current-work/#the-click>

[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]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120609#l-299>

[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]] 版))
<http://html5.org/tools/web-apps-tracker?from=7163&to=7164>

[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]] 版))
<http://html5.org/tools/web-apps-tracker?from=7595&to=7596>

[18] [CITE[''''''[''''''whatwg'''''']'''''' Resource loading in browsing context-less Documents]]
( ([TIME[2012-12-20 04:51:06 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-December/038407.html>

[20] [CITE[''''''[''''''whatwg'''''']'''''' Resource loading in browsing context-less Documents]]
( ([TIME[2013-07-12 01:53:37 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040010.html>

[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]] 版))
<http://html5.org/tools/web-apps-tracker?from=8049&to=8050>

[22] [CITE[''''''[''''''whatwg'''''']'''''' Inert nodes and element.click()]]
( ([TIME[2013-07-13 09:28:35 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040051.html>

[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]] 版))
<http://html5.org/tools/web-apps-tracker?from=8420&to=8421>

[24] [CITE@en-US[Notifications API Standard]]
( ([TIME[2014-02-11 16:20:34 +09:00]] 版))
<http://notifications.spec.whatwg.org/#activating-a-notification>

[26] [CITE[The Platform for Privacy Preferences 1.0 (P3P1.0) Specification]]
( ([TIME[2002-04-16 22:03:48 +09:00]] 版))
<http://www.w3.org/TR/P3P/#Dynamic_Data>

[60] [CITE@en[Bug 27430 – Synthetic click activation for non activatable elements]]
([TIME[2015-07-07 12:00:17 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=27430#c6>

[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]]))
<https://github.com/WICG/interventions/issues/19>

[72] [CITE[Clicking issues - ChromeDriver - WebDriver for Chrome]]
( ([TIME[2016-08-05 07:21:42 +09:00]]))
<https://sites.google.com/a/chromium.org/chromedriver/help/clicking-issues>

** クリックによる活性化

[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]])
<https://github.com/whatwg/html/commit/8ffbd146d4709057e45dd6cfc81e7a70897050c5>
- [74] [CITE@en[Align activation behavior with changes to DOM Standard]]
([[annevk]]著, [TIME[2016-10-21 00:06:40 +09:00]])
<https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab>
]REFS]
]POSTAMBLE]

[37] [CITE@en[Stop overriding UIEvent's detail attribute]]
([[annevk]]著, [TIME[2016-10-25 19:00:16 +09:00]])
<https://github.com/whatwg/html/commit/bd3239b5b38a157a61cb570df5c80ad1dbc2b9d4>

[56] [CITE@en[Editorial: use "creating an event" more and refactor click()]]
([[annevk]]著, [TIME[2016-10-29 03:23:16 +09:00]])
<https://github.com/whatwg/html/commit/467b98781f82f6bf1a91fad435982ff27d8d9999>

[64] [CITE@en[Remove tabindex's synthetic click event feature]]
([[annevk]]著, [TIME[2016-11-04 00:03:54 +09:00]])
<https://github.com/whatwg/html/commit/35e3e1ec556de58da08d928ee033b7d10e91d1b9>

[65] [CITE@en[element click: use action primitives to define click steps]]
([[andreastt]]著, [TIME[2017-01-26 04:10:19 +09:00]])
<https://github.com/w3c/webdriver/commit/6666b4b33e843b75031b1036b68e06bb45757f20>

[66] [CITE@en[27414 – Activation of <input> when mutability or type is changed]]
([TIME[2017-07-23 16:41:32 +09:00]])
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=27414>

[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]])
<https://github.com/w3c/webcomponents/issues/578>

[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]])
<https://bugzilla.mozilla.org/show_bug.cgi?id=366945>

[84] [CITE@en[Add HTMLOrSVGElement interface mixin by annevk · Pull Request #3543 · whatwg/html]]
([TIME[2018-03-24 18:06:15 +09:00]])
<https://github.com/whatwg/html/pull/3543>

[86] [CITE@en[Specify synthetic mouse event name for click()]]
([[CYBAI]]著, [TIME[2019-03-29 05:20:13 +09:00]])
<https://github.com/whatwg/html/commit/6c7c5a73d602a1d2dce18e8484cb22e086a767ff>

[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]])
<https://github.com/whatwg/html/issues/4451>

[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]])
<https://github.com/whatwg/html/pull/4453>

[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]])
<https://github.com/whatwg/html/commit/8f8c1f50158736b3cf16188377a0974a20367c8b>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)