jQueryマウスイベント

posted : 2023.01.30 updated : 2023.01.30

マウスイベントは、ユーザーがポインティングデバイスと対話することによって発生するイベントを表します。

マウスイベントには、クリック、ダブルクリック、マウス、マウスエンター、マウスアウトなどがあります。これらのマウスイベントで任意のハンドラを使用したい場合、jQueryはマウスイベント処理メソッドを多数提供しています。

jQuery マウスイベント一覧

click():ユーザーが要素をクリックしたときに発生するイベントです。
contextmenu(): ユーザーが要素を右クリックしてコンテキストメニューを表示したときに発生するイベント。
dblclick(): ユーザーが要素をダブルクリックしたときに発生するイベントです。
hover(): マウスのポインタが要素に入ったり離れたりしたときに実行されるハンドラを、マッチした要素に1つまたは2つアタッチします。
mouseenter()。ポインタが要素に移動したときに発生するイベントです。
mouseleave(): ポインタが要素から移動したときに発生するイベント。
mouseover(): ポインタが要素またはその子要素に移動したときに発生するイベントです。
mouseout(): ユーザがマウスポインタを要素や子要素の外に移動させたときに発生するイベント。

すべてのイベントは、ハンドラ関数をパラメータとして受け取ります。しかし、hover()メソッドは、2つのハンドラをパラメータとして受け取ることができます。

$(selector).mouseenter( function(){} )
$(selector).mouseleave( function(){} )
$(selector).hover(handlerIn, handlerOut)

jQuery マウスクリックイベント

<div>
    <h3>CyberBridge</h3>
    <p>Welcome to CyberBridge</p>
</div>
<script>
      $(document).ready(function () {
        $("div").click(function () {
          $(this).css("background-color", "green");
          $("div p").append("<br>" + "thank you for click");
        });
      });
</script>

jQuery dblclick マウスイベント

<style>
      .test {
        background-color: green;
        font-style: italic;
      }
 </style>
<div>
    <h3>CyberBridge</h3>
    <p>Welcome to CyberBridge</p>
</div>    
<script>
      $(document).ready(function () {
        $("div").dblclick(function () {
          $(this).addClass("test");
        });
      });
    </script>

jQuery Mouse up and Mouse down event

<style>
      .test {
        background-color: green;
        font-style: italic;
      }
 </style>
<div>
    <h3>CyberBridge</h3>
    <p>Welcome to CyberBridge</p>
</div> 
<script>
      $(document).ready(function () {
        $("div")
          .mousedown(function () {
            $(this).addClass("test");
          })
          .mouseup(function () {
            $(this).removeClass();
          });
      });
</script>

jQuery Mouse Enter and Mouse Leave event

<div class="box">
      <h3>CyberBridge</h3>
      <div class="container">
        <p>Welcome to CyberBridge</p>
        <button>Read More</button>
      </div>
    </div>    
<script>
      $(".box")
        .mouseenter(function () {
          $(".container").show(500);
        })
        .mouseleave(function () {
          $(".container").hide(500);
        });
    </script>

jQuery right-click event (contextmenu())

<div>
    <h3>CyberBridge</h3>
    <p>Welcome to CyberBridge</p>
</div>   
<script>
      $(document).ready(function () {
        $("div").contextmenu(function () {
          $("div").fadeTo(500, 0.4);
          $("div p").append("<br><i>Right Click</i>");
        });
      });
</script>