GlobalEventHandlers.onpointerdown
ontransitioncancel
は GlobalEventHandlers
のイベントハンドラーで、ポインティングデバイスが最初に押されたときに発生する pointerdown
イベントのイベントハンドラーを指定するために使用します。このイベントは Window
, Document
, Element
の各オブジェクトに送信されることがあります。
これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の mousedown
イベントと機能的に同等です。 pointerdown
イベントが preventDefault()
の呼び出しによってキャンセルされなかった場合、ほとんどのユーザーエージェントは mousedown
イベントを発生させるので、ポインターイベントを使用していないサイトでも機能します。
addEventListener()
を使用して、 pointerdown
イベントのリスナーを追加することもできます。
構文
target.onpointerdown = downHandler; var downHandler = target.onpointerdown;
値
関数 (Function
) で、 pointerdown
イベントがtarget
で指定された Element
, Document
, Window
に送られた場合に処理するためのものです。これは入力として pointerdown
イベントを記述する PointerEvent
を受け取ります。
例
この例では、onpointerdown
を使用して pointerdown
イベントを監視し、それに基づいて行動する方法を示します。 もちろん、addEventListener()
を使うこともできます。
JavaScript
まず、pointerdown
イベントを処理する JavaScript コードを見てみましょう。
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();
}
これは単に pointerdown
イベントのイベントハンドラとして関数 handleDown()
を確立するために onpointerdown
を使います。
handleDown()
関数は、今度は pointerType
の値を調べて使用されているポインティングデバイスの種類を判断し、その情報を使用して文字列をカスタマイズしてターゲットボックスの内容を置き換えます。
それから、イベントの preventDefault()
メソッドを呼び出して、mousedown
イベントがトリガーされないようにします。 そうしないで、ポインターイベントのサポートが欠けている場合に備えて、それらのイベント用のハンドラを持っていると、イベントが2回処理される可能性があります。
pointerup
イベント用のハンドラーもあります。
targetBox.onpointerup = handleUp;
function handleUp(evt) {
targetBox.innerHTML = "Tap me, click me, or touch me!";
evt.preventDefault();
}
このコードの役割は、ユーザーによる要素の操作が終了した後 (例えば、マウスボタンを放したとき、またはスタイラスや指を画面から離したときなど) に、元のテキストをターゲットボックスに復元することです。
さらに、mouseup
イベントが不必要にトリガーされないようにするために、イベントの preventDefault()
メソッドを呼び出します。
HTML
HTML は次のように非常に単純です。
<div id="target">
Tap me, click me, or touch me!
</div>
CSS
CSS は単にターゲットの外観を設定するだけで、その機能にはまったく影響しません。
#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;
}
結果
結果の出力は次の通りです。 ボックスをタップ、クリック、タッチして、何が起こるかを確認してください。 最大の効果を得るには、さまざまなポインタタイプで試してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Pointer Events – Level 2 onpointerdown の定義 |
勧告 | 不安定版 |
Pointer Events onpointerdown の定義 |
廃止 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser