From b5b6a8929053e639a12822dfdac9604753c6efef Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 20 Jul 2021 00:33:12 +0900 Subject: Web/API/GlobalEventHandlers 以下の onclick, onmousedown, onmouseup を更新 (#1505) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/07/11 時点の英語版に同期 --- .../web/api/globaleventhandlers/onclick/index.html | 98 +++++++++------------- .../api/globaleventhandlers/onmousedown/index.html | 70 ++++++---------- .../api/globaleventhandlers/onmouseup/index.html | 71 +++++++--------- 3 files changed, 96 insertions(+), 143 deletions(-) (limited to 'files/ja/web/api') 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 ---

{{ ApiRef("HTML DOM") }}

-

onclick は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、所与の要素の {{domxref("Element/click_event", "click")}} イベントを処理するためのイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。

+

onclick は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、指定された要素の {{domxref("Element/click_event", "click")}} イベントを処理するためのイベントハンドラーです。

-

click イベントは、ユーザーが要素をクリックしたときに発生します。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。

+

click イベントは、ユーザーが要素をクリックしたときに発行されます。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。

-
注: click イベントを使用してアクションを起動するときは、マウスやタッチスクリーンを使用していないユーザーが同じアクションを使用できるように、 {{event("keydown")}} イベントにも同じアクションを追加することを検討してください。
+
注: click イベントを使用してアクションを起動するときは、マウスやタッチ画面を使用していないユーザーが同じアクションを使用できるように、 {{domxref("Element/keydown_event", "keydown")}} イベントにも同じアクションを追加することを検討してください。
-

構文

+

構文

-
target.onclick = functionRef;
+
target.onclick = functionRef;
 

 
-
値

+
値

 
-
functionRef は、関数名または関数式です。 この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} はイベントが発行された要素になります。

+
functionRef は、関数名または関数式です。この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} は onclick が結びつけられたオブジェクトになります (event.currentTarget にも一致します)。

 
-
一度に1つのオブジェクトに割り当てることができる onclick ハンドラは1つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。

+
一度に 1 つのオブジェクトに割り当てることができる onclick ハンドラーは 1 つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。

 
-
例

+
例

 
-
クリックの検出

+
クリックの検出

 
 
この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。

 
 
HTML

 
-
<div id="demo">ここをクリック</div>

+
<div id="demo">ここをクリック</div>

 
 
JavaScript

 
-
document.getElementById('demo').onclick = function changeContent() {
+
document.getElementById('demo').onclick = function changeContent() {
 
-   document.getElementById('demo').innerHTML = "Help me";
+   document.getElementById('demo').textContent = "Help me";
    document.getElementById('demo').style = "Color: red";
 
 }

 
-
結果

+
結果

 
 
{{EmbedLiveSample("Detecting_clicks")}}

 
-
クリックの座標の取得

+
クリックの座標の取得

 
 
この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。

 
 
HTML

 
-
<p>この例のどこかをクリックしてください。</p>
+
<p>この例のどこかをクリックしてください。</p>
 <p id="log"></p>

 
 
JavaScript

 
-
let log = document.getElementById('log');
+
let log = document.getElementById('log');
 
 document.onclick = inputChange;
 
@@ -71,43 +72,26 @@ function inputChange(e) {
   log.textContent = `位置: (${e.clientX}, ${e.clientY})`;
 }

 
-
結果

+
結果

 
 
{{EmbedLiveSample("Getting_the_coordinates_of_clicks")}}

 
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}

-
-
ブラウザーの互換性

-
-

-
{{Compat("api.GlobalEventHandlers.onclick")}}

-

-
-
関連情報

+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

 
 
    
- 
  • {{domxref("Element/click_event", "click")}} イベント
    • 
- 
  • 関連イベントハンドラー
-  
      
-   
    • {{domxref("GlobalEventHandlers.onauxclick")}}
      • 
-   
    • {{domxref("GlobalEventHandlers.ondblclick")}}
      • 
-  
    
- 
    • 
+  
  • {{domxref("Element/click_event", "click")}} イベント
    • 
+  
  • 関連イベントハンドラー
+    
      
+      
    • {{domxref("GlobalEventHandlers.onauxclick")}}
      • 
+      
    • {{domxref("GlobalEventHandlers.ondblclick")}}
      • 
+    
    
+  
    • 
 

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
 ---
 
{{ ApiRef("HTML DOM") }}

 
-
onmousedown は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+
onmousedown は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理するイベントハンドラーです。

 
-
mousedown イベントは、ユーザーがマウスボタンを押したときに発生します。

+
mousedown イベントは、ユーザーがマウスボタンを押したときに発行されます。

 
-

-
メモ: onmousedown の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。

+

+  
メモ: onmousedown の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。

 

 
-
構文

+
構文

 
-
target.onmousedown = functionRef;
+
target.onmousedown = functionRef;
 

 
-
値

+
値

 
 
functionRef は、関数名または関数式です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

 
-
例

+
例

 
 
この例は、マウスボタンを押したままにすると画像の一部を表示します。onmousedown, {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}, {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} イベントハンドラーを使用します。

 
 
HTML

 
-
<div class="container">
+
<div class="container">
   <div class="view" hidden></div>
   <img src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg">
 </div>

 
 
CSS

 
-
.container {
+
.container {
   width: 320px;
   height: 213px;
   background: black;
@@ -62,7 +63,7 @@ img {
 
 
JavaScript

 
-
function showView(event) {
+
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;

 
-
結果

+
結果

 
 
{{EmbedLiveSample("Example", 700, 300)}}

 
-
仕様

+
仕様書

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}{{Spec2('HTML WHATWG')}}

+{{Specifications}}
 
-
ブラウザの互換性

+
ブラウザーの互換性

 
-

+
{{Compat}}

 
-
-
{{Compat("api.GlobalEventHandlers.onmousedown")}}

-

-
-
関連情報

+
関連情報

 
 
    
- 
  • {{event("mousedown")}} event
    • 
+  
  • {{event("mousedown")}} イベント
    • 
 

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
 ---
 
{{ApiRef("HTML DOM")}}

 
-
onmouseup は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+
onmouseup は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理するイベントハンドラーです。

 
-
mouseup イベントは、ユーザーがマウスボタンを離したときに発生します。

+
mouseup イベントは、ユーザーがマウスボタンを離したときに発行されます。

 
-

-
メモ: onmouseup の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。

+

+  
メモ: onmouseup の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。

 

 
-
構文

+
構文

 
-
target.onmouseup = functionRef;

+
target.onmouseup = functionRef;

 
-
値

+
値

 
-
functionRef は、関数名または関数式です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

+
functionRef は、関数名または関数式です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

 
-
例

+
例

 
 
この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} と onmouseup イベントハンドラーを使用します。

 
 
HTML

 
-
<div class="container">
+
<div class="container">
   <div class="toaster"></div>
   <div class="toast">Hello world!</div>
 </div>

 
 
CSS

 
-
.container {
+
.container {
   position: absolute;
   left: 50%;
   bottom: 20px;
@@ -75,7 +77,7 @@ translation_of: Web/API/GlobalEventHandlers/onmouseup
 
 
JavaScript

 
-
function depress() {
+
function depress() {
   toast.classList.add('depressed');
 }
 
@@ -89,37 +91,20 @@ const toast = document.querySelector('.toast');
 toaster.onmousedown = depress;
 document.onmouseup = release;

 
-
結果

+
結果

 
 
{{EmbedLiveSample("Example", 700, 200)}}

 
-
仕様

+
仕様書

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}{{Spec2('HTML WHATWG')}}

+{{Specifications}}
 
-
ブラウザの互換性

+
ブラウザーの互換性

 
-

+
{{Compat}}

 
-
-
{{Compat("api.GlobalEventHandlers.onmouseup")}}

-

-
-
関連情報

+
関連情報

 
 
    
- 
  • {{event("mouseup")}} event
    • 
+  
  • {{event("mouseup")}} イベント
    • 
 

-- 
cgit v1.2.3-54-g00ecf