【jQuery入門】マウス操作関連のイベントを理解する

jQueryで利用できるイベント

分類	イベント名	発生するタイミング
マウス	click	要素をクリックした
	dblclick	要素をダブルクリックした
	mousedown	マウスのボタンを押した
	mouseenter	要素にマウスポインターが当たった
	mouseleave	要素からマウスポインターが離れた
	mousemove	要素の中をマウスポインターが移動した
	mouseout	要素からマウスポインターが離れた
	mouseover	要素にマウスポインターが当たった
	mouseup	マウスのボタンを離した
キー	click	要素をクリックした
	keydown	キーを押した
	keypress	キーが押されている
	keyup	キーを離した
フォーム	blur	要素からフォーカスが離れた
	change	要素の値を変更した(input, select, textareaなど)
	focus	要素にフォーカスが移った
	select	テキストボックス／テキストエリアのテキストを選択した
	submit	フォームを送信した
その他	resize	ウインドウのサイズを変更した
	scroll	ページや要素をスクロールした
	contextmenu	コンテキストメニューを表示する前

mouseenter／mouseleaveとmouseover／mouseoutの違い

これらはいずれもマウスがその要素に乗ったとき／要素から外れたときに発生するイベントですが、似て非なるものなので要注意

両者に違いが出るのは要素が入れ子になっている場合で、イベントリスナーは外側の要素に対して設定されているものとします

この場合、mouseenter／mouseleaveイベントは、あくまで対象の要素に対してのみ発生する

対してmouseover／mouseoutイベントは、内側の要素に移動した時もイベントが発生する

フォトギャラリーを実装するための準備

サムネイル画像のリストは<ul>要素で表す

サムネイルリストはul, li要素で表す。

単にimg要素を列挙するだけでもとりあえずの表示に支障はないが、タグ付けするうえでは、その要素の意味を考えて最も適切なタグをつけることが大切

それによって、あとからデザイン付けする場合にも、設定により一貫性を持たせられる

サムネイルリストのスタイルを設定する

ul, li要素ではデフォルトでリスト項目が縦に並び、かつ、行頭に箇条書きを表す「・」が自動でついてしまう。これをcssでつかないようにしておく

JavaScriptによるフォトギャラリーの実装

スクリプトの内容は大きく以下に分類できる

サムネイルリストの先頭画像を拡大表示する(初期化処理)
マウスがクリックされたタイミングで画像を拡大表示する

リスト先頭の画像を拡大表示する

ページをロードしたタイミングで、img要素のsrc属性をリスト先頭画像のsrc属性で置き換える。先頭画像を取得するには、:first-childフィルターを利用する

マウスがクリックされたタイミングで画像を拡大表示する

マウスがクリックされた（厳密にはマウスが押され、離された）タイミングで処理を行うには、clickイベントを利用する

<ul id="list">
  <li><img src="https://placehold.jp/50x50.png" alt=""></li>
  <li><img src="https://placehold.jp/60x60.png" alt=""></li>
  <li><img src="https://placehold.jp/70x70.png" alt=""></li>
  <li><img src="https://placehold.jp/80x80.png" alt=""></li>
  <li><img src="https://placehold.jp/90x90.png" alt=""></li>
</ul>
<hr>
<img id="big">

$(function () {
  $("#big").attr("src", $("#list img:first-child").attr("src"));
  $("#list img").click(function () {
    $("#big").attr("src", $(this).attr("src"));
  });
});

#list {
  margin: 0px;
  padding: 0px;
}

#list li {
  margin: 2px;
  height: 40px;
  list-style-type: none;
  float: left;
}

#list img {
  width: 55px;
  height: 40px;
}

hr {
  clear: both;
}

#big {
  width: 315px;
  height: 235px;
}

See the Pen
jQuery10-2 by shinjiezumi (@sezumi)
on CodePen.

マウス関連のその他のイベント

マウスポインターが移動したタイミングで処理を行う

mouseイベントはある要素の上でマウスポインターが移動したタイミングで発生する。主に、マウスの位置座標をもとに処理を行うようなケースで利用する

<div>
  <p><img id="img2" src="https://placehold.jp/500x500.png" alt=""></p>
  <p id="msg"></p>
</div>

$(function () {
  $("#img2").mouseover(function (e) {
    const x = e.pageX;

    if (x < 175) {
      $("#msg").text("175未満です");
    } else if (x < 410) {
      $("#msg").text("410未満です");
    } else {
      $("#msg").text("410以上です");
    }
  });
});

See the Pen
jQuery11-1 by shinjiezumi (@sezumi)
on CodePen.

ポイントとなるのは引数としてeを受け取っている点。これはイベントオブジェクトと呼ばれるもので、イベントが発生したときのさまざまな情報を含んでいる

情報そのものはイベントが発生したときにブラウザから自動的に渡されるので、イベント処理の中ではイベントオブジェクトに自由にアクセスできる

マウスのボタン操作や移動のタイミングで処理を行う

mousedownイベントはマウスボタンが押下されたタイミングで、mouseupイベントはボタンが離されたタイミングでそれぞれ発生する。

clickイベントとも似ているが、clickイベントがマウスの左ボタンが押されて離れたところで発生するのに対して、mousedown/mouseupイベントは

すべてのボタン（左、右、中央すべて）を検知できる
ボタンを押す、離す、というタイミングを個別に認識する

という点が異なる。

以下は指定された画像をブラウザ上でドラッグ＆ドロップできるようにするサンプル

mousemoveイベントでマウスの移動に応じて、イベントの発生元となるimg要素の垂直位置(cssのtopプロパティ)、水平位置(cssのleftプロパティ)を設定している

マウスの座標はイベントオブジェクトからpageX, pageYプロパティで取得できる

img要素はtop/leftプロパティで位置を指定できるように、あらかじめCSSのpositionプロパティをabsoluteとしておく必要がある

<div style="position: relative">
  <img id="img3" src="https://placehold.jp/200x200.png" alt="" style="position: absolute">
</div>

$(function () {
  let flag = false;

  $("#img3")
    .mousedown(function (e) {
      console.log(e.pageX);
      console.log(e.pageY);
      flag = true;
      return false;
    })
    .mouseup(function () {
      flag = false;
      return false;
    })
    .mousemove(function (e) {
      if (flag) {
        $(this).css({
          top: e.pageY - 30, // imgの位置によって調整する
          left: e.pageX - 70 // imgの位置によって調整する
        });
      }
      return false;
    });
});

See the Pen
jQuery11-2 by shinjiezumi (@sezumi)
on CodePen.