GlobalEventHandlers.onpointerdown

GlobalEventHandlers のイベントハンドラ onpointerdown は、ポインティングデバイスが最初に押されたときに発生する pointerdown イベントのイベントハンドラを指定するために使用します。 このイベントは、WindowDocumentElement のオブジェクトに送信できます。

これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の mousedown イベントと機能的に同等です。 preventDefault() の呼び出しで pointerdown イベントがキャンセルされない場合、ほとんどのユーザーエージェントは mousedown イベントを発生させるので、ポインタイベントを使用していないサイトでも機能します。

addEventListener() を使用して、pointerdown イベントのリスナーを追加することもできます。

構文

target.onpointerdown = downHandler;

var downHandler = target.onpointerdown;

targetElementDocumentWindowpointerdown イベントを処理するための関数。 これは入力として 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 の定義
廃止された 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onpointerdownChrome 完全対応 55Edge 完全対応 ありFirefox 完全対応 59
完全対応 59
完全対応 29
無効
無効 From version 29: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
完全対応 10
代替名
代替名 非標準の名前 onmspointerdown を使用しています。
Opera ? Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 29
無効
完全対応 29
無効
無効 From version 29: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報