diff options
Diffstat (limited to 'files/ja/web/api/globaleventhandlers/onpointerdown/index.html')
| -rw-r--r-- | files/ja/web/api/globaleventhandlers/onpointerdown/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/ja/web/api/globaleventhandlers/onpointerdown/index.html b/files/ja/web/api/globaleventhandlers/onpointerdown/index.html new file mode 100644 index 0000000000..fa4c33e8fe --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerdown/index.html @@ -0,0 +1,167 @@ +--- +title: GlobalEventHandlers.onpointerdown +slug: Web/API/GlobalEventHandlers/onpointerdown +tags: + - API + - Document + - Element + - GlobalEventHandlers + - HTML DOM + - Pointer Events + - Pointer Events API + - PointerEvent + - Property + - Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onpointerdown +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>ontransitioncancel</code></strong> は {{domxref("GlobalEventHandlers")}} のイベントハンドラーで、ポインティングデバイスが最初に押されたときに発生する {{event("pointerdown")}} イベントのイベントハンドラーを指定するために使用します。このイベントは {{domxref("Window")}}, {{domxref("Document")}}, {{domxref("Element")}} の各オブジェクトに送信されることがあります。</p> + +<p>これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の {{event("mousedown")}} イベントと機能的に同等です。 <code>pointerdown</code> イベントが {{domxref("Event.preventDefault", "preventDefault()")}} の呼び出しによってキャンセルされなかった場合、ほとんどのユーザーエージェントは <code>mousedown</code> イベントを発生させるので、ポインターイベントを使用していないサイトでも機能します。</p> + +<p>{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、 <code>pointerdown</code> イベントのリスナーを追加することもできます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onpointerdown = <var>downHandler</var>; + +var <var>downHandler</var> = <var>target</var>.onpointerdown; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>関数 ({{jsxref("Function")}}) で、 <code>pointerdown</code> イベントが<code><var>target</var></code> で指定された {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}} に送られた場合に処理するためのものです。これは入力として <code>pointerdown</code> イベントを記述する {{domxref("PointerEvent")}} を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerdown</code> を使用して <code>pointerdown</code> イベントを監視し、それに基づいて行動する方法を示します。 もちろん、<code>addEventListener()</code> を使うこともできます。</p> + +<h4 id="JavaScript">JavaScript</h4> + +<p>まず、<code>pointerdown</code> イベントを処理する JavaScript コードを見てみましょう。</p> + +<pre class="brush: js notranslate">var targetBox = document.getElementById("target"); + +targetBox.onpointerdown = handleDown; + +function handleDown(evt) { + var action; + + switch(evt.pointerType) { + case "mouse": + action = "clicking"; + break; + case "pen": + action = "tapping"; + break; + case "touch": + action = "touching"; + break; + default: + action = "interacting with"; + break; + } + + targetBox.innerHTML = "<strong>Thanks for " + action + " me!</strong>"; + evt.preventDefault(); +}</pre> + +<p>これは単に <code>pointerdown</code> イベントのイベントハンドラとして関数 <code>handleDown()</code> を確立するために <code>onpointerdown</code> を使います。</p> + +<p><code>handleDown()</code> 関数は、今度は {{domxref("PointerEvent.pointerType", "pointerType")}} の値を調べて使用されているポインティングデバイスの種類を判断し、その情報を使用して文字列をカスタマイズしてターゲットボックスの内容を置き換えます。</p> + +<p>それから、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出して、<code>mousedown</code> イベントがトリガーされないようにします。 そうしないで、ポインターイベントのサポートが欠けている場合に備えて、それらのイベント用のハンドラを持っていると、イベントが2回処理される可能性があります。</p> + +<p>{{event("pointerup")}} イベント用のハンドラーもあります。</p> + +<pre class="brush: js notranslate">targetBox.onpointerup = handleUp; + +function handleUp(evt) { + targetBox.innerHTML = "Tap me, click me, or touch me!"; + evt.preventDefault(); +}</pre> + +<p>このコードの役割は、ユーザーによる要素の操作が終了した後 (例えば、マウスボタンを放したとき、またはスタイラスや指を画面から離したときなど) に、元のテキストをターゲットボックスに復元することです。</p> + +<p>さらに、<code>mouseup</code> イベントが不必要にトリガーされないようにするために、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出します。</p> + +<details><summary> +<h4 id="HTML">HTML</h4> +</summary> + +<p>HTML は次のように非常に単純です。</p> + +<pre class="brush: html notranslate"><div id="target"> + Tap me, click me, or touch me! +</div></pre> +</details> + +<details><summary> +<h4 id="CSS" name="CSS">CSS</h4> +</summary> + +<p>CSS は単にターゲットの外観を設定するだけで、その機能にはまったく影響しません。</p> + +<pre class="brush: css notranslate">#target { + width: 400px; + height: 30px; + text-align: center; + font: 16px "Open Sans", "Helvetica", sans-serif; + color: white; + background-color: blue; + border: 2px solid darkblue; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +}</pre> +</details> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果の出力は次の通りです。 ボックスをタップ、クリック、タッチして、何が起こるかを確認してください。 最大の効果を得るには、さまざまなポインタタイプで試してください。</p> + +<p>{{EmbedLiveSample("Example", 450, 50)}}</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerdown")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Pointer_events">ポインターイベント</a></li> + <li><a href="/ja/docs/Web/API/Pointer_events/Using_Pointer_Events">ポインターイベントの使用</a></li> + <li><a href="/ja/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></li> + <li><code><a href="/ja/docs/Web/API/Document/pointerdown_event">Document: pointerdown</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">HTMLElement: pointerdown</a></code> イベント</li> +</ul> |