jQuery - mousedownイベント、mouseupイベント、mousemoveイベント、
公開日：2018-12-25
更新日：2019-05-14
更新日：2019-05-14
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 + ", " + e.screenY); //スクリーン
$("#msg2").html(e.clientX + ", " + e.clientY); //ブラウザ
$("#msg3").html(e.pageX + ", " + e.pageY); //Webページ
$("#msg4").html(e.offsetX + ", " + 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 は、ページをスクロールすると、異なる値になります。
実行結果：画面
