リファレンス mouseWheel()

mouseWheel()

マウスホイールが動いたときに一度呼び出される関数です。

mouseWheel()関数を宣言すると、ユーザーがマウスホイールでスクロールしたときに 自動的に実行されるコードブロックを設定できます:

function mouseWheel() {
  // 実行するコード
}

mouseXmouseYなどのマウスシステム変数は、 p5.jsによってmouseWheel()が呼び出されたときに、 最新の値で更新されます:

function mouseWheel() {
  if (mouseX < 50) {
    // マウスが左側にある場合に実行するコード
  }

  if (mouseY > 50) {
    // マウスが下部付近にある場合に実行するコード
  }
}

パラメータeventはオプションです。mouseWheel()には常に マウススクロールイベントを説明するプロパティを持つ MouseEvent オブジェクトが渡されます:

function mouseWheel(event) {
  // イベントを使用して実行するコード
  console.log(event);
}

eventオブジェクトには多くのプロパティがあり、その中には deltaという、ユーザーが スクロールした距離を含むNumberがあります。例えば、ユーザーが上にスクロールすると、 event.deltaの値は5になるかもしれません。event.deltaは ユーザーが上にスクロールすると正の値、下にスクロールすると負の値になります。 macOSで「ナチュラル」スクロールが有効になっている場合、符号は逆になります。

ブラウザは様々なマウスイベントにデフォルトの動作を設定している場合があります。 例えば、一部のブラウザでは、ユーザーがマウスボタンを押しながらマウスを動かすと テキストがハイライトされます。このイベントのデフォルトの動作を防ぐには、 関数の最後にreturn false;を追加してください。

注意:Safariでは、mouseWheel()が期待通りに動作するためには、 関数の最後にreturn false;を追加する必要がある場合があります。

実例

シンタックス

mouseWheel([event])

パラメーター

event
WheelEvent:

オプションのWheelEvent引数。

Notice any errors or typos? Please let us know. Please feel free to edit src/events/mouse.js and open a pull request!

関連するリファレンス