JS マウスイベント click と mousedown と mouseup の違いを理解する

今回は「マウスイベント」について見ていきましょう。

実は今まですでにマウスイベントを沢山見てきています。

殆どの記事で紹介した「click」イベントもマウスイベントの一つです。

「click」イベント以外にもマウスイベントは沢山ありますが、ここではクリックに関連するイベントについて見ていきましょう。

dblclickイベント
mousedown と mouseup
1. mousedown
2. mouseup
click と mousedown と mouseup の違い
1. イベントが発生する順番
2. 発生場所の違い
あとがき

dblclickイベント

「dblclick」イベントは、要素上でダブルクリック（2回連続してクリック）した場合にイベントを発生します。

    <div class="divdb" id="double">ダブルクリック</div>

let dbClick = document.getElementById('double');
dbClick.addEventListener('dblclick', function () {
  alert('ダブルクリック');
});

ダブルクリック

ボックスをダブルクリックすると、アラートが表示されます。

ここでは「addEventListner」を使っていますが、「ondblclick」属性を使って書くことも出来ます。

let dbClick = document.getElementById('double');
dbClick.ondblclick = () => {
  alert('ダブルクリック');
};

ここではアロー関数を使っていますが、普通に書けば、「function(){}」となります。

mousedown と mouseup

mousedown

「mousedown」イベントは、要素内でマウスが押されたときに発生します。

    <div class="divdb" id="mdown">マウスダウン</div>

let mouseDown = document.getElementById('mdown');
mouseDown.addEventListener('mousedown', function () {
  alert('mousedown');
});

マウスダウン

mouseup

「mouseup」イベントは、要素内でマウスが離されたときに発生します。

    <div class="divdb" id="mup">マウスアップ</div>

let mouseUp = document.getElementById('mup');
mouseUp.addEventListener('mouseup', function () {
  alert('mouseup');
});

マウスアップ

click と mousedown と mouseup の違い

mousedown と mouseup それぞれクリックするとアラートが表示されます。

どちらも同じように感じるし、そもそも「click」イベントと何が違うのか分からないと感じる方も多いと思います。

そこでこれらの違いについて詳しく見ていきましょう。

イベントが発生する順番

let mouseUp = document.getElementById('mup');
mouseUp.addEventListener('mouseup', function () {
  console.log('mouseup');
});

mouseUp.addEventListener('mousedown', function () {
  console.log('mousedown');
});

mouseUp.addEventListener('click', function () {
  console.log('click');
});

「mouseup」、「mousedown」、「click」の3つのイベントを同じ要素で発生させると以下の順番で実行されます。

mousedown
 mouseup
 click

この順番を理解すると、それぞれの違いが分かりやすくなってきます。

発生場所の違い

    <div class="differ">
      <div class="newdiv" id="dif1">mousedown</div>
      <div class="newdiv" id="dif2">mouseup</div>
      <div class="newdiv" id="dif3">click</div>
    </div>

let upMouse = document.getElementById('dif2');
upMouse.addEventListener('mouseup', function () {
  alert('mouseup');
});

let downMouse = document.getElementById('dif1');
downMouse.addEventListener('mousedown', function () {
  alert('mousedown');
});

let newClick = document.getElementById('dif3');
newClick.addEventListener('click', function () {
  alert('click');
});

mousedown

mouseup

click

それぞれのボックスがありますが、普通にクリックするとどれも同じようにアラートが表示されます。

では違いを感じて頂くために、それぞれのボックスで以下のようにクリックしてみてください。