diff options
Diffstat (limited to 'files/ja/web/api/globaleventhandlers/onclick/index.html')
| -rw-r--r-- | files/ja/web/api/globaleventhandlers/onclick/index.html | 98 |
1 files changed, 41 insertions, 57 deletions
diff --git a/files/ja/web/api/globaleventhandlers/onclick/index.html b/files/ja/web/api/globaleventhandlers/onclick/index.html index b934dfb4cc..6e4ec8e02f 100644 --- a/files/ja/web/api/globaleventhandlers/onclick/index.html +++ b/files/ja/web/api/globaleventhandlers/onclick/index.html @@ -2,68 +2,69 @@ title: GlobalEventHandlers.onclick slug: Web/API/GlobalEventHandlers/onclick tags: - - API - - Event Handler - - GlobalEventHandlers - - HTML DOM - - Property - - Reference +- API +- Event Handler +- GlobalEventHandlers +- HTML DOM +- Property +- Reference +browser-compat: api.GlobalEventHandlers.onclick translation_of: Web/API/GlobalEventHandlers/onclick --- <p>{{ ApiRef("HTML DOM") }}</p> -<p><code><strong>onclick</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、所与の要素の {{domxref("Element/click_event", "click")}} イベントを処理するためのイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。</p> +<p><code><strong>onclick</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、指定された要素の {{domxref("Element/click_event", "click")}} イベントを処理するための<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p> -<p><code>click</code> イベントは、ユーザーが要素をクリックしたときに発生します。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。</p> +<p><code>click</code> イベントは、ユーザーが要素をクリックしたときに発行されます。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。</p> -<div class="note"><strong>注</strong>: <code>click</code> イベントを使用してアクションを起動するときは、マウスやタッチスクリーンを使用していないユーザーが同じアクションを使用できるように、 {{event("keydown")}} イベントにも同じアクションを追加することを検討してください。</div> +<div class="note"><strong>注:</strong> <code>click</code> イベントを使用してアクションを起動するときは、マウスやタッチ画面を使用していないユーザーが同じアクションを使用できるように、 {{domxref("Element/keydown_event", "keydown")}} イベントにも同じアクションを追加することを検討してください。</div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>target</var>.onclick = <var>functionRef</var>; +<pre class="brush: js"><var>target</var>.onclick = <var>functionRef</var>; </pre> -<h3 id="Value" name="Value">値</h3> +<h3 id="Value">値</h3> -<p><code><var>functionRef</var></code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} はイベントが発行された要素になります。</p> +<p><code><var>functionRef</var></code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} は <code>onclick</code> が結びつけられたオブジェクトになります (<code>event.currentTarget</code> にも一致します)。</p> -<p>一度に1つのオブジェクトに割り当てることができる <code>onclick</code> ハンドラは1つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。</p> +<p>一度に 1 つのオブジェクトに割り当てることができる <code>onclick</code> ハンドラーは 1 つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。</p> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Detecting_clicks" name="Detecting_clicks">クリックの検出</h3> +<h3 id="Detecting_clicks">クリックの検出</h3> <p>この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。</p> <h4 id="HTML">HTML</h4> -<pre class="brush:html notranslate"><div id="demo">ここをクリック</div></pre> +<pre class="brush:html"><div id="demo">ここをクリック</div></pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">document.getElementById('demo').onclick = function changeContent() { +<pre class="brush: js">document.getElementById('demo').onclick = function changeContent() { - document.getElementById('demo').innerHTML = "Help me"; + document.getElementById('demo').textContent = "Help me"; document.getElementById('demo').style = "Color: red"; }</pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample("Detecting_clicks")}}</p> -<h3 id="Getting_the_coordinates_of_clicks" name="Getting_the_coordinates_of_clicks">クリックの座標の取得</h3> +<h3 id="Getting_the_coordinates_of_clicks">クリックの座標の取得</h3> <p>この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。</p> <h4 id="HTML_2">HTML</h4> -<pre class="brush:html notranslate"><p>この例のどこかをクリックしてください。</p> +<pre class="brush:html"><p>この例のどこかをクリックしてください。</p> <p id="log"></p></pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js notranslate">let log = document.getElementById('log'); +<pre class="brush: js">let log = document.getElementById('log'); document.onclick = inputChange; @@ -71,43 +72,26 @@ function inputChange(e) { log.textContent = `位置: (${e.clientX}, ${e.clientY})`; }</pre> -<h4 id="Result_2" name="Result_2">結果</h4> +<h4 id="Result_2">結果</h4> <p>{{EmbedLiveSample("Getting_the_coordinates_of_clicks")}}</p> -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="spectable standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("api.GlobalEventHandlers.onclick")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> <ul> - <li>{{domxref("Element/click_event", "click")}} イベント</li> - <li>関連イベントハンドラー - <ul> - <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li> - <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li> - </ul> - </li> + <li>{{domxref("Element/click_event", "click")}} イベント</li> + <li>関連イベントハンドラー + <ul> + <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li> + <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li> + </ul> + </li> </ul> |