diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/api/mouseevent/ctrlkey/index.md | 104 |
1 files changed, 45 insertions, 59 deletions
diff --git a/files/ja/web/api/mouseevent/ctrlkey/index.md b/files/ja/web/api/mouseevent/ctrlkey/index.md index 920a4cae65..c879da2f18 100644 --- a/files/ja/web/api/mouseevent/ctrlkey/index.md +++ b/files/ja/web/api/mouseevent/ctrlkey/index.md @@ -1,75 +1,61 @@ --- title: MouseEvent.ctrlKey slug: Web/API/MouseEvent/ctrlKey +tags: + - API + - DOM + - DOM イベント + - MouseEvent + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.MouseEvent.ctrlKey translation_of: Web/API/MouseEvent/ctrlKey --- -<p>{{APIRef("DOM Events")}}</p> +{{APIRef("DOM Events")}} -<p>読み取り専用プロパティ <strong><code>MouseEvent.ctrlKey</code></strong> は、イベント発生時に <kbd>control</kbd> キーが押されたかどうかを、押されていた (<code>true</code>) または押されていない (<code>false</code>) の{{jsxref("Boolean")}} で返します。</p> +**`MouseEvent.ctrlKey`** は読み取り専用のプロパティで、このマウスイベントが発生した際に <kbd>ctrl</kbd> キーが押されていたかどうかを示す論理値です。 -<h2 id="構文">構文</h2> +> **Note:** Macintosh のキーボードでは、このキーは <kbd>control</kbd> キーです。 -<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey -</pre> +## 値 -<h3 id="戻り値">戻り値</h3> +論理値gで、 `true` はキーが押されていたことを示し、 `false` はキーが押されていなかったことを示します。 -<p>A boolean</p> +## 例 -<h2 id="Example" name="Example">例</h2> +この例では、 {{Event("click")}} イベントを発生させた際に `ctrlKey` プロパティを記録します。 -<pre class="brush: js"><html> -<head> -<title>ctrlKey使用例</title> +### HTML -<script type="text/javascript"> +```html +<p><code>ctrlKey</code> プロパティを試験するためにどこかをクリックしてください。</p> +<p id="log"></p> +``` -function showChar(e){ - alert( - "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" - + "charCode: " + e.charCode + "\n" - + "CTRL key pressed: " + e.ctrlKey + "\n" - ); +### JavaScript + +```js +let log = document.querySelector('#log'); +document.addEventListener('click', logKey); + +function logKey(e) { + log.textContent = `Ctrl キーの押下状態: ${e.ctrlKey}`; } +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -</script> -</head> - -<body onkeypress="showChar(event);"> -<p>何か文字キーを単体またはCTRLキーと同時に押してください。<br /> -また、CTRLキーに加え、SHIFTキーも同時に使用できます。</p> -</body> -</html> -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>{{SpecName('DOM2 Events')}}から変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - <td>最初期の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> - -<p>{{Compat("api.MouseEvent.ctrlKey")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{ domxref("MouseEvent") }}</li> -</ul> +- {{ domxref("MouseEvent") }} |