ZeroPlus Media > Web制作 > JavaScript > 【jQuery】click()よりも速い！mousedown()とmouseup()とは

【jQuery】click()よりも速い！mousedown()とmouseup()とは

2022/03/25

2023/05/06

mousedown()とmouseup()の2つのイベントは、click()イベントよりトリガーのタイミングが早く、状況によってはclick()よりも便利な場合があります。この記事では「mousedown()イベントとmouseup()イベントの使い方」について解説します。

この記事で身につく内容

mousedown()イベントの使い方
mouseup()イベントの使い方
click()イベントとの違い

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

mousedown()イベントの使い方
mouseup()イベントの使い方
mousedown()とmouseup()とclick()の違い
まとめ

mousedown()イベントの使い方

mousedown()は、jQueryの数あるイベントの一つです。マウスが押されたときにイベントが発火します。

基本書式は次のようになります。

mousedown()の基本書式

$('セレクタ').mousedown(function(){
  // ここに処理を書く
});

上記をコードに当てはめると次のようになります。

mousedown()のサンプル

<button id="js-btn-down">mousedown!</button>

const btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
  console.log('down');
});

出力結果

mousedown()イベントの特徴は、トリガーが「マウスが押されたとき」なので発火のタイミングはclick()よりも早いことです。

mouseup()イベントの使い方

mouseup()は、マウスが押された状態から離されたときにイベントが発火します。

基本書式は次のようになります。

mouseup()の基本書式

$('セレクタ').mouseup(function(){
  // 処理を書く
});

上記をコードに当てはめると次のようになります。

mouseUp()のサンプル

<button id="js-btn-up">mouseup!</button>

const btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
  console.log('up');
});

出力結果

mouseup()イベントの特徴は、トリガーが「マウスが押された状態から離したタイミング」なのでclick()よりも発火が早いことです。

mousedown()とmouseup()とclick()の違い

mousedown()とmouseup()の2つのイベントは、click()イベントと似ていますがトリガーとなるタイミングが異なります。

3つのイベントの中で最も早いのがmousedown()です。

トリガーのタイミングの違い

mousedown()：押されてから発火
mouseup()：押された状態から離したときに発火
click()：押されて離されたら発火

click()イベントはmousedown()+mouseup()のようなイメージです。

トリガーのタイミングの違いは、下記のサンプルで確認できます。

ボタンをクリックすると、テキストが出力されるシンプルなプログラムです。

  <button id="js-btn">mouseClick!</button>
  <div class="box"></div>
  <div class="box-up"></div>

.box {
  width: 100%;
  height: auto;
}

.is-click {
  background: orange;
}

.is-down {
  background: blue;
}

.is-up {
  background: red;
}

const btn = $('#js-btn');
const box = $('.box');

btn.click(function () {
  box.append('<div class="is-click">clickで追加したテキスト</div>');
})

btn.mousedown(function () {
  box.append('<div class="is-down">mousedownで追加したテキスト</div>');
});

btn.mouseup(function () {
  box.append('<div class="is-up">mouseupで追加したテキスト</div>');
});

出力結果

See the Pen mousedown/mouseup/click by ZeroPlus (@zeroplus-programming) on CodePen.

出力結果から、mousedownが最も早く、その次にmouseup、最後にclickが出力されていることが分かります。