jQuery - mousedownイベント、mouseupイベント、mousemoveイベント、

公開日：2018-12-25 更新日：2019-05-14
[jQuery]

1. 概要

マウスのボタンが押された時に mousedown イベント、マウスのボタンが離された時に mouseup イベント、マウスが移動した時に mousemoveイベントが発生します。

//マウスのボタンが押された時
$(セレクタ).on("mousedown", function(e) {
	処理;
});

//マウスのボタンが離された時
$(セレクタ).on("mouseup", function(e) {
	処理;
});

//マウスが移動した時
$(セレクタ).on("mousemove", function(e) {
	処理;
});

プロパティ内容
e.screenX, e.screenYスクリーン座標系
e.clientX, e.clientYブラウザ座標系
e.pageX, e.pageY ページ座標系
e.offsetX, e.offsetY要素座標系
e.whichマウスのボタン。１：左、３：右

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div style="float:left; padding:20px; padding-top:50px;">
    <div id="main" style="width:100px; height:300px; background-color:lightgray; color:black;">
      ここでマウスを動かしてください。
    </div>
  </div>
  
  <div style="float:left; padding-top:50px;">
    <div>screen:<span id="msg1"></span></div>
    <div>client:<span id="msg2"></span></div>
    <div>page  :<span id="msg3"></span></div>
    <div>offset:<span id="msg4"></span></div>
    <div>ボタン           :<span id="msg5"></span></div>
  </div>
  <div style="clear:both"></div>
  <script>

    //ログ出力
    function showLog(e) {
      $("#msg1").html(e.screenX + ",&nbsp;" + e.screenY); //スクリーン
      $("#msg2").html(e.clientX + ",&nbsp;" + e.clientY); //ブラウザ
      $("#msg3").html(e.pageX   + ",&nbsp;" + e.pageY);   //Webページ
      $("#msg4").html(e.offsetX + ",&nbsp;" + e.offsetY); //要素
      $("#msg5").html(e.which); //1 左クリック  3:右クリック
    }

    //イベント
    $("#main").on("mousedown", function(e) {
      showLog(e);
    });

    $("#main").on("mouseup", function(e) {
      showLog(e);
    });

    $("#main").on("mousemove", function(e) {
      showLog(e);
    });

  </script>
</body></html>

グレーの部分にマウスを置くと、座標が表示されます。
ブラウザの位置やページをスクロールさせて、値を確認してください。
client と page は、ページをスクロールすると、異なる値になります。
実行結果：画面



Tag

New Article