マウスの各操作に対して処理を設定する
マウスはクリック、右クリック、スクロール、カーソルの移動など様々な操作があります。
ブラウザはこれらのマウスの操作があるたびに「イベント」を発生する仕組みが用意されており、イベントリスナーに予め「イベント」と「実行する処理」をセットで登録しておくことで、イベントが発生したタイミングに指定した処理を実行することが可能になります。
具体的にイメージしていただけるよう、簡単な例を使って解説します。
以下の例は、ボタンに対してマウスの左クリックというイベントと、アラートメッセージを出力する処理を予めイベントリスナーに登録しています。
コードは次のようになります。
赤字の箇所がポイントです。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// 左クリックをイベントリスナーに登録
document.getElementById("button1").addEventListener('click', sayHello);
});
function sayHello() {
alert("Hello");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>上記のコードはHTML要素の<button id="button1">ボタン</button>に対して、イベントリスナーにイベントを登録するaddEventListenerメソッドを実行することで、左クリック（click）するとsayHelloメソッドを実行するように設定しています。
上記のコードではwindow.addEventListener('load', function(){〜}というイベントリスナーがもう1つ設定されていますが、これはページが読み込まれたタイミングで処理を実行する内容になっています。
つまり、上記のページが読み込まれたタイミングで「// 左クリックをイベントリスナーに登録」を実行するという流れです。
このようにHTML要素に予めイベントリスナーを登録することで、マウスの各操作に対して実行したい処理を設定することができます。
マウス操作に関連したイベント一覧
マウスの各操作に対応したイベントの種類と発生するタイミングをまとめた一覧を紹介します。
以下の一覧は「ボタン操作」と「カーソル移動」に分けて掲載しています。
ボタン操作したときのイベント
| イベント名 | 発生するタイミング |
|---|---|
| click | 左クリックしたとき |
| dblclick | 左ダブルクリックしたとき |
| contextmenu | 右クリックしてメニューが開くとき |
| auxclick | 左クリック、右クリック以外のボタン（ホイールクリックなど）を押したとき |
| mousedown | マウスのいずれかのボタンを押した瞬間 |
| mouseup | マウスのいずれかのボタンを離した瞬間 |
| select | マウスでテキストなどを選択したとき |
| wheel | マウスホイールが転がったとき |
カーソル移動したときのイベント
| イベント名 | 発生するタイミング |
|---|---|
| mouseenter | マウスカーソルがHTML要素に乗ったとき（子孫要素も1つの範囲とする） |
| mouseleave | マウスカーソルがHTML要素から離れたとき（子孫要素も1つの範囲とする） |
| mousemove | マウスカーソルが動いたとき |
| mouseover | マウスカーソルがHTML要素に乗ったとき（子孫要素は別範囲とする） |
| mouseout | マウスカーソルがHTML要素から離れたとき（子孫要素は別範囲とする） |
以下、それぞれのイベントを設定したコード例を解説していきます。
ダブルクリックしたときに処理を実行する
ダブルクリックはイベント「dblclick」を使用します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// ダブルクリック
document.getElementById("button1").addEventListener('dblclick', sayHello);
});
function sayHello() {
alert("Hello");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>冒頭のコードとほぼ同じですが、イベントを左クリック「click」からダブルクリック「dblclick」に変更しています。
このコードを実行すると、ボタンをダブルクリックしたときにアラートメッセージが表示されるようになります。
右クリックしたときに処理を実行する
右クリックはイベント「contextmenu」を使用します。
イベント名に含まれる「menu」の通り、正確には右クリックでメニューが開くタイミングに対するイベントとなります。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// 右クリック
document.getElementById("button1").addEventListener('contextmenu', sayHello);
});
function sayHello() {
alert("Hello");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>このコードを実行すると、アラートメッセージが表示された後にメニューが開きます。
これは指定した処理の後に右クリックの通常動作が実行されるためですが、もしメニューを表示したくない場合は次のようにevent.preventDefault();を追記してください。
右クリックの通常動作をキャンセルするコード例
function sayHello() {
alert("Hello");
event.preventDefault();
}preventDefaultメソッドはイベントの通常動作をキャンセルします。
たまに右クリックを禁止しているサイトがありますが、このメソッドを使って実装していることが多いです。
もちろん次のように無名関数内でpreventDefaultメソッドを実行しても同じことができます。
無名関数のイベント設定例
// 右クリック（メニューが開くとき）
document.getElementById("button1").addEventListener('contextmenu', function(event){
alert("Hello2");
event.preventDefault();
});左右クリック以外のボタンを押したときに処理を実行する
マウスの左クリック、右クリック以外のボタン（ホイールクリックなど）が押されたときはイベント「auxclick」を使用します。
基本的な使い方は左クリックのときと同様です。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// その他のボタン
document.getElementById("button1").addEventListener('auxclick', sayHello);
});
function sayHello() {
alert("Hello");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>左クリック、右クリック、ホイールクリックの3つは基本操作としてほとんどのマウスで使用できますが、それ以外のボタンはマウスの機種によって数や機能が大きく異なるため、やや使いどころが難しいかもしれません。
マウスのボタンは全て番号が割り当てられているため、どのボタンが押されらたか確認したい場合はMouseEventオブジェクトのbuttonプロパティを参照します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// その他のボタン
document.getElementById("button1").addEventListener('auxclick', viewClickButton);
});
function viewClickButton(event) {
console.log(event.button);
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>このコードを実行してボタンをホイールクリックなどをすると、次のようにボタン番号が出力されます。
新しく作成したviewClickButtonメソッドでは引数で受け取ったMouseEventオブジェクトからbuttonプロパティの値をconsole.logメソッドで出力しています。
いずれかのボタンを押したとき、離したときに処理を実行する
マウスのいずれかのボタンが押されたときにはイベント「mousedown」、離したときはイベント「mouseup」が発生します。
この2つのイベントを使うと、マウスのボタンに発生するイベントをより細かく検出することができます。
例えば左クリックであればイベント「click」を使うことができますが、次のコードのようにmousedownとmouseupを使うと次のような出力を得ることができます。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// マウスのいずれかのボタンを押した瞬間
document.getElementById("button1").addEventListener('mousedown', logOn);
// マウスのいずれかのボタンを離した瞬間
document.getElementById("button1").addEventListener('mouseup', logOff);
});
function logOn(event) {
// ボタン番号で左クリックか確認
if( event.button === 0 ) {
console.log("on");
}
}
function logOff(event) {
// ボタン番号で左クリックか確認
if( event.button === 0 ) {
console.log("off");
}
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>このコードを実行すると、ボタンを左クリックした瞬間にlogOnメソッドを実行し、離した瞬間はlogOffメソッドを実行します。
左クリックを押した状態のまま、マウスカーソルをボタン以外の場所に移動してから離すとmousedownのみ発生し、mouseupは発生しません。
マウスでテキストを選択したときに処理を実行する
input要素やtextarea要素のテキストをマウスで選択したときにはイベント「select」が発生します。
このイベントを使うとマウスで選択したテキストを検出することができます。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// マウスでテキストを選択したとき
document.querySelector("textarea").addEventListener('select', selectTextView);
});
function selectTextView(event) {
// 選択されたテキストを取得
let selection = event.target.value.substring( event.target.selectionStart, event.target.selectionEnd);
console.log(selection);
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<textarea>マウスの各種アクションにイベントリスナーを設定する</textarea>
</section>
</body>
</html>このコードを実行すると、textarea要素の中のテキストが選択されたらselectイベントが発生してselectTextViewメソッドが実行されます。
メソッドの中では選択したテキストの開始位置（event.target.selectionStartプロパティ）と終了位置（event.target.selectionEndプロパティ）を参照し、テキストを抽出してconsole.logメソッドで出力します。
マウスのホイールが転がったときに処理を実行する
マウスのホイールが回転されるとイベント「wheel」が発生します。
このイベントを使うとマウスのホイールでスクロールした移動量を検出することができます。
以下の例ではsection要素の上にマウスカーソルがあるときにホイールが回転されると、logDeltaYメソッドを実行してスクロール量を出力します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// マウスのホイールが回転
document.querySelector("section").addEventListener('wheel', logDeltaY);
});
function logDeltaY(event) {
console.log(event.deltaY);
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
</section>
</body>
</html>ホイールが回転するとWheelEventオブジェクトが渡されます。
logDeltaYメソッドでは渡されたWheelEventオブジェクトからdeltaYプロパティを参照することで、スクロール量を取得しています。
カーソルがHTML要素に乗ったとき、離れたときに処理を実行する その1
マウスカーソルが特定のHTML要素に乗るとイベント「mouseenter」が発生し、離れたときはイベント「mouseleave」が発生します。
このイベントを使うと次のようにカーソルが特定のHTML要素の上に来たかどうかを判断することができます。
次の例はカーソルがsection要素（ピンク色のエリア）に乗るとlogOnメソッドを実行し、反対に離れるとlogOffメソッドを実行します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// カーソルが乗ったときに実行
document.getElementById("content1").addEventListener('mouseenter', logOn);
// カーソルが離れたときに実行
document.getElementById("content1").addEventListener('mouseleave', logOff);
});
function logOn(event) {
console.log(event.target.nodeName + ':on');
}
function logOff(event) {
console.log(event.target.nodeName + ':off');
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>このコードを実行したときの表示例は次のようになります。
まずはカーソルがsection要素に乗っていない状態です。
ここから、カーソルが下に移動してsection要素に乗るとlogOnメソッドが実行されます。
カーソルが上に移動してsection要素から離れるとlogOffメソッドが実行されます。
以上のように、シンプルですが特定のHTML要素の上にカーソルが乗ったり離れたタイミングで指定した処理を実行することができます。
子孫要素にカーソルが乗ったとき、離れたときも処理を実行する
もし親要素のみでなく、子孫要素にカーソルが乗ったときや離れたときも処理を実行したいときは、第3引数のオプションでcaptureをtrueに設定します。
上記のコードにオプション指定を追すると次のようになります。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
let option = {
capture: true
};
// mouseenter
document.getElementById("content1").addEventListener('mouseenter', logOn, option);
// mouseleave
document.getElementById("content1").addEventListener('mouseleave', logOff, option);
});
function logOn(event) {
console.log(event.target.nodeName + ':on');
}
function logOff(event) {
console.log(event.target.nodeName + ':off');
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>上記のコードを実行したときの挙動を解説します。
まずはsection要素に乗ったときですが、これはオプションを指定する前と動作です。
続いて、section要素の子孫要素であるp要素にカーソルが乗ったときもlogOnメソッドが再び実行されます。
カーソルがp要素とsection要素から離れたときもlogOffメソッドをそれぞれ実行します。
オプションを指定しなかった場合は親要素であるsection要素にカーソルが乗ったときと離れときしか出力されませんでしたが、指定したあとは子孫要素もカーソルが乗ったときに出力されるようになりました。
カーソルがHTML要素に乗ったとき、離れたときに処理を実行する その2
HTML要素に乗ったとき、離れたときのイベントは「mouseover」と「mouseout」という、上記の「mouseenter」と「mouseleave」に似たイベントがあります。
このイベントは親要素と子孫要素を別領域として扱う点が異なります。
具体的には次のようにイベントが発生します。
まずはsection要素にカーソルが乗ったときの動作です。
この時点ではまだmouseoverとmouseenterに違いはありませんが、p要素にカーソルが移動したときに違いがハッキリとでます。
カーソルがp要素に移動すると一度section要素からは離れてmouseoutが発生し、その後にp要素に乗ったこととしてmouseoverが発生していることが分かります。
引き続き、ボタンにカーソルを移動すると次のように出力されます。
出力内容をみるとp要素からsection要素に移動し、再びsection要素を離れてbutton要素に乗っていることが分かります。
カーソルがsection要素を横切ってp要素からbutton要素へ移動したと判断できます。
最後に、カーソルを下に移動してsection要素の外に移動すると次のように出力されます。
以上のように、mouseoverとmouseoutはカーソルの移動を細かく追うことができます。
上記は次のコードを実行しています。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// カーソルが乗ったときに実行
document.getElementById("content1").addEventListener('mouseover', logOn);
// カーソルが離れたときに実行
document.getElementById("content1").addEventListener('mouseout', logOff);
});
function logOn(event) {
console.log(event.target.nodeName + ':on');
}
function logOff(event) {
console.log(event.target.nodeName + ':off');
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>マウスカーソルが動いたときに処理を実行する
マウスカーソルが移動するとイベント「mousemove」が発生します。
このイベントを使うとカーソルが移動するごとにカーソルの座標を取得することができます。
mousemoveは次のようにイベントリスナーに登録して使用します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// カーソルが移動したときに実行
document.getElementById("content1").addEventListener('mousemove', logPointer);
});
function logPointer(event) {
console.log("X:" + event.pageX);
console.log("Y:" + event.pageY);
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1">
<p>マウスの各種アクションにイベントリスナーを設定する</p>
<button id="button1">ボタン</button>
</section>
</body>
</html>このコードではid属性「content1」のsection要素にmousemoveを登録しています。
実行すると、section要素の上でカーソルが移動する度mousemoveが発生してlogPointerメソッドを実行し、カーソルの座標をconsole.logメソッドで出力します。
カーソルの座標はページ左上を起点にしてpageXでX座標（左端からの距離）を取得し、pageYはY座標（上端からの距離）を取得します。