Web/API/GlobalEventHandlers 以下の onclick, onmousedown, onmouseup を更新 (#1505)

2021/07/11 時点の英語版に同期

3 files changed, 96 insertions, 143 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">&lt;div id="demo"&gt;ここをクリック&lt;/div&gt;</pre>
+<pre class="brush:html">&lt;div id="demo"&gt;ここをクリック&lt;/div&gt;</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">&lt;p&gt;この例のどこかをクリックしてください。&lt;/p&gt;
+<pre class="brush:html">&lt;p&gt;この例のどこかをクリックしてください。&lt;/p&gt;
 &lt;p id="log"&gt;&lt;/p&gt;</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>
diff --git a/files/ja/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/web/api/globaleventhandlers/onmousedown/index.html
index b983b353c0..ec56405a60 100644
--- a/files/ja/web/api/globaleventhandlers/onmousedown/index.html
+++ b/files/ja/web/api/globaleventhandlers/onmousedown/index.html
@@ -1,48 +1,49 @@
 ---
-title: element.onmousedown
-slug: Web/API/globalEventhandlers/onmousedown
+title: GlobalEventHandlers.onmousedown
+slug: Web/API/GlobalEventHandlers/onmousedown
 tags:
-  - API
-  - Event Handler
-  - GlobalEventHandlers
-  - HTML DOM
-  - Property
-  - Reference
+- API
+- Event Handler
+- GlobalEventHandlers
+- HTML DOM
+- Property
+- Reference
+browser-compat: api.GlobalEventHandlers.onmousedown
 translation_of: Web/API/GlobalEventHandlers/onmousedown
 ---
 <div>{{ ApiRef("HTML DOM") }}</div>
 
-<p><strong><code>onmousedown</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p>
+<p><strong><code>onmousedown</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p>
 
-<p><code>mousedown</code> イベントは、ユーザーがマウスボタンを押したときに発生します。</p>
+<p><code>mousedown</code> イベントは、ユーザーがマウスボタンを押したときに発行されます。</p>
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>onmousedown</code> の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。</p>
+<div class="notecard note">
+  <p><strong>メモ:</strong> <code>onmousedown</code> の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。</p>
 </div>
 
-<h2 id="構文">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><em>target</em>.onmousedown = <em>functionRef</em>;
+<pre class="brush: js"><em>target</em>.onmousedown = <em>functionRef</em>;
 </pre>
 
-<h3 id="値">値</h3>
+<h3 id="Value">値</h3>
 
 <p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p>
 
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
 <p>この例は、マウスボタンを押したままにすると画像の一部を表示します。<code>onmousedown</code>, {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}, {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} イベントハンドラーを使用します。</p>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html notranslate">&lt;div class="container"&gt;
+<pre class="brush: html">&lt;div class="container"&gt;
   &lt;div class="view" hidden&gt;&lt;/div&gt;
   &lt;img src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg"&gt;
 &lt;/div&gt;</pre>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css notranslate">.container {
+<pre class="brush: css">.container {
   width: 320px;
   height: 213px;
   background: black;
@@ -62,7 +63,7 @@ img {
 
 <h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js notranslate">function showView(event) {
+<pre class="brush: js">function showView(event) {
   view.removeAttribute('hidden');
   view.style.left = event.clientX - 50 + 'px';
   view.style.top = event.clientY - 50 + 'px';
@@ -85,37 +86,20 @@ container.onmousedown = showView;
 container.onmousemove = moveView;
 document.onmouseup = hideView;</pre>
 
-<h3 id="結果">結果</h3>
+<h3 id="Result">結果</h3>
 
 <p>{{EmbedLiveSample("Example", 700, 300)}}</p>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<div>
+<p>{{Compat}}</p>
 
-
-<p>{{Compat("api.GlobalEventHandlers.onmousedown")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>{{event("mousedown")}} event</li>
+  <li>{{event("mousedown")}} イベント</li>
 </ul>
diff --git a/files/ja/web/api/globaleventhandlers/onmouseup/index.html b/files/ja/web/api/globaleventhandlers/onmouseup/index.html
index 21837138aa..1e61e7795e 100644
--- a/files/ja/web/api/globaleventhandlers/onmouseup/index.html
+++ b/files/ja/web/api/globaleventhandlers/onmouseup/index.html
@@ -1,47 +1,49 @@
 ---
-title: element.onmouseup
+title: GlobalEventHandlers.onmouseup
 slug: Web/API/GlobalEventHandlers/onmouseup
 tags:
-  - API
-  - Event Handler
-  - GlobalEventHandlers
-  - HTML DOM
-  - Property
-  - Reference
+- API
+- Event Handler
+- GlobalEventHandlers
+- HTML DOM
+- Property
+- Reference
+browser-compat: api.GlobalEventHandlers.onmouseup
 translation_of: Web/API/GlobalEventHandlers/onmouseup
 ---
 <div>{{ApiRef("HTML DOM")}}</div>
 
-<p><code><strong>onmouseup</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p>
+<p><code><strong>onmouseup</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p>
 
-<p><code>mouseup</code> イベントは、ユーザーがマウスボタンを離したときに発生します。</p>
+<p><code>mouseup</code> イベントは、ユーザーがマウスボタンを離したときに発行されます。</p>
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>onmouseup</code> の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。</p>
+<div class="notecard note">
+  <p><strong>メモ:</strong> <code>onmouseup</code> の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。</p>
 </div>
 
-<h2 id="構文">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><em>target</em>.onmouseup = <var>functionRef</var>;</pre>
+<pre
+  class="brush: js"><em>target</em>.onmouseup = <var>functionRef</var>;</pre>
 
-<h3 id="値">値</h3>
+<h3 id="Value">値</h3>
 
-<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p>
+<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p>
 
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
 <p>この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} と <code>onmouseup</code> イベントハンドラーを使用します。</p>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html notranslate">&lt;div class="container"&gt;
+<pre class="brush: html">&lt;div class="container"&gt;
   &lt;div class="toaster"&gt;&lt;/div&gt;
   &lt;div class="toast"&gt;Hello world!&lt;/div&gt;
 &lt;/div&gt;</pre>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css notranslate">.container {
+<pre class="brush: css">.container {
   position: absolute;
   left: 50%;
   bottom: 20px;
@@ -75,7 +77,7 @@ translation_of: Web/API/GlobalEventHandlers/onmouseup
 
 <h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js notranslate">function depress() {
+<pre class="brush: js">function depress() {
   toast.classList.add('depressed');
 }
 
@@ -89,37 +91,20 @@ const toast = document.querySelector('.toast');
 toaster.onmousedown = depress;
 document.onmouseup = release;</pre>
 
-<h3 id="結果">結果</h3>
+<h3 id="Result">結果</h3>
 
 <p>{{EmbedLiveSample("Example", 700, 200)}}</p>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<div>
+<p>{{Compat}}</p>
 
-
-<p>{{Compat("api.GlobalEventHandlers.onmouseup")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>{{event("mouseup")}} event</li>
+  <li>{{event("mouseup")}} イベント</li>
 </ul>