SYNCERのロゴ
アイキャッチ画像

WheelEvent - ホイールイベント

WheelEventは、ホイール操作に関連するイベントで取り扱われるインターフェイスです。

概要

名前
WheelEvent
継承
IDL
[Constructor(DOMString type, optional WheelEventInit eventInitDict), Exposed=Window]
interface WheelEvent : MouseEvent {
  // DeltaModeCode
  const unsigned long DOM_DELTA_PIXEL = 0x00;
  const unsigned long DOM_DELTA_LINE = 0x01;
  const unsigned long DOM_DELTA_PAGE = 0x02;

  readonly attribute double deltaX;
  readonly attribute double deltaY;
  readonly attribute double deltaZ;
  readonly attribute unsigned long deltaMode;
};

dictionary WheelEventInit : MouseEventInit {
  double deltaX = 0.0;
  double deltaY = 0.0;
  double deltaZ = 0.0;
  unsigned long deltaMode = 0;
};

dictionary MouseEventInit : EventModifierInit {
  long screenX = 0;
  long screenY = 0;
  long clientX = 0;
  long clientY = 0;

  short button = 0;
  unsigned short buttons = 0;
  EventTarget? relatedTarget = null;
};

partial dictionary MouseEventInit {
    long movementX = 0;
    long movementY = 0;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://w3c.github.io/uievents/#wheelevent

チュートリアル

WheelEventは、wheelイベントでコールバック関数に渡されるオブジェクトです。

var callbackFn = function ( event ) {
	console.log( event ) ;
}

element.onwheel = callbackFn ;

コンストラクタ

WheelEvent()

新しいWheelEventのオブジェクトを作成します。

プロパティ

deltaMode

ホイールのスクロール量をどの単位で表現しているか、を表す数値を返します。各数値は定数に対応しています。

deltaX

ホイールの水平方向のスクロール量を返します。

deltaY

ホイールの垂直方向のスクロール量を返します。

deltaZ

ホイールのZ軸方向のスクロール量を返します。

メソッド

固有のメソッドはありません。

定数

DOM_DELTA_LINE

0x01を返します。この値は、ホイールのスクロール量が行単位であることを表します。

DOM_DELTA_PAGE

0x02を返します。この値は、ホイールのスクロール量がページ単位であることを表します。

DOM_DELTA_PIXEL

0x00を返します。この値は、ホイールのスクロール量がピクセル単位であることを表します。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
WheelEvent 17+ 7.1+ 9+ 15+ 8.3+ 4.0+
deltaMode 43+ 17+ 7.1+ 9+ 30+ 8.3+×
deltaX 43+ 17+ 7.1+ 9+ 30+ 8.3+×
deltaY 43+ 17+ 7.1+ 9+ 30+ 8.3+×
deltaZ 43+ 17+ 7.1+ 9+ 30+ 8.3+×
DOM_DELTA_LINE 26+ 17+ 7.1+ 9+ 15+ 7.0+ 4.4+
DOM_DELTA_PAGE 26+ 17+ 7.1+ 9+ 15+ 7.0+ 4.4+
DOM_DELTA_PIXEL 26+ 17+ 7.1+ 9+ 15+ 7.0+ 4.4+
WheelEvent() 26+ 17+ 7.1+× 15+ 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。