jQuery 「イベント」マウスボタンを押す・離す

mousedown()は、マウスボタンを押すとイベントが発生します。押されたボタンに応じて、左なら1、中央は2、右は3が、e.whichプロパティに返されます。反対に、mouseup()を使うと、ドラッグ＆ドロップやコンテクストメニューのような、高度な処理も記述できます。対象となるHTML要素には制限はなく、どの要素にも、イベントハンドラを結び付けられます。引数無しの.mousedown()、.mouseup()メソッドは、それぞれ「trigger(‘mousedown’)」「trigger(‘mouseup’)」の短縮系で、これらのイベントをスクリプトからキックしたいときに使用します。

書式

$(対象要素).on('mousedown', function(e){処理…})
$(対象要素).on('mouseup', function(e){処理…})
$(対象要素).trigger('mousedown')
$(対象要素).trigger('mouseup')
$(対象要素).mousedown()
$(対象要素).mouseup()

$('p').on('mousedown', function(e){処理…})
$('p').on('mouseup', function(e){処理…})
$('p').trigger('mousedown')
$('p').trigger('mouseup')
$('p').mousedown()
$('p').mouseup()

サンプル

マウスボタンを押す、離す操作を検知する

<body>
    <div class="main">
      <div class="header">
        <h1> サンプル </h1>
      </div>
      <div class="content"> 
        <h2>マウスの移動範囲</h2>
        <p class="mouseground"></p>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2019 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.mouseground').on('mousemove', function(e){
        $(e.currentTarget).text('pageX='+e.pageX+'pageY='+e.pageY);
      });
      $('.mouseground').on('mousedown', function(e){
        $(e.currentTarget).text('どぼん');
      });
      $('.mouseground').on('mouseup', function(e){
        $(e.currentTarget).text('バーン');
      });
    });
    </script> 
    </body>

カテゴリー:JavaScriptjQueryイベント