jQuery 「イベント」マウスの移動

mousemove()は、マウスカーソルの移動をトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素にでもmousemove()イベントハンドラを結び付けられます。引数無しの.mousemove()メソッドは、「trigger(‘mousemove’)」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にmousemoveイベントを発生させます。ただし、実際にマウスカーソルが移動することも、イベントオブジェクトに座標位置が返されることもありません。e.pageXやe.pageYの値を取得しようとしても、「undefined」が返ります。

書式

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

$('#button').mousemove(function(e){
   $('p').text('pageX='+e.pageX+'pageY='+e.pageY);
});
$('p').trigger('mousemove');
$('p').mousemove();

サンプル

マウスの移動でカーソル座標を表示

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .mouseground{
            width: 400px;
            height: 400px;
            background-color: rgb(96, 100, 99);
          }
        </style>
  </head>
  <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);
      });
    });
    </script> 
    </body>
</html>

カテゴリー:JavaScriptjQueryイベント