マウス | JavaScriptのイベントをたくさん見られるサイト

Hover

#hover

mouseenter

マウスが要素に乗ったとき。

    document.getElementById('hover').addEventListener('mouseenter', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

mousemove

マウスが要素上で動いたとき。
このイベントは頻度が高いので、適度に間引いて処理をしたほうが優しいです。

    document.getElementById('hover').addEventListener('mousemove', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

mouseleave

マウスが要素から離れたとき。

    document.getElementById('hover').addEventListener('mouseleave', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

その他のイベント

マウスが乗ったときのイベントにはmouseoverとmouseoutなどもありますが、子要素がいる場合に余計なイベントが発生してしまうので、それを意図して使う場合を除いてはmouseenterとmouseleaveを使ったほうが思い通りになると思います。

Click

#clickable

mousedown

マウスが押されたとき。

    document.getElementById('clickable').addEventListener('mousedown', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

mouseup

マウスが離されたとき。

    document.getElementById('clickable').addEventListener('mouseup', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

click

マウスがクリックされたとき。
文字通りですが mousedown → mouseup → click の順に実行されます。

    document.getElementById('clickable').addEventListener('click', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

dblclick

マウスがダブルクリックされたとき。

    document.getElementById('clickable').addEventListener('dblclick', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
})

contextmenu

マウスが右クリックされてメニューが開く前。

    document.getElementById('clickable').addEventListener('contextmenu', function(e) {
  console.log(e.pageX, e.pageY, e.clientX, e.clientY, e.offsetX, e.offsetY)
  alert('できるだけ右クリックは禁止しないでください！')
  e.preventDefault() // 右クリックさせたくない場合
})

MouseEvent

マウスに関するイベントのインターフェースです。

    /*=== よく使うプロパティ ===*/

// スクリーン上でのXY
console.log(e.screenX)
console.log(e.screenY)

// ブラウザ上でのXY
console.log(e.clientX)
console.log(e.clientY)

// ページ上でのXY
console.log(e.pageX)
console.log(e.pageY)

// イベントが発生した要素からのXY
console.log(e.offsetX)
console.log(e.offsetY)

Touch

#touch

touchstart

タッチされたとき。

    document.getElementById('touch').addEventListener('touchstart', function(e) {
  console.log(e.changedTouches[0]) // 1本目の指の位置情報など
})

touchmove

タッチされて動いているとき。
このイベントは頻度が高いので、適度に間引いて処理をしたほうが優しいです。

    document.getElementById('touch').addEventListener('touchmove', function(e) {
  console.log(e.changedTouches[0]) // 1本目の指の位置情報など
  e.preventDefault() // スクロールさせない場合
})

touchend

タッチが離れたとき。

    document.getElementById('touch').addEventListener('touchend', function(e) {
  console.log(e.changedTouches[0]) // 1本目の指の位置情報など
})

TouchEvent

タッチに関するイベントの引数として渡されるオブジェクトです。それぞれの指に対してTouchオブジェクトの値を読み取ることができます。取得できる値はMouseEventと似ています。

    /*=== よく使うプロパティ ===*/

// 現在のイベントに関する指の情報
console.log(e.changedTouches)

// 1本目の指の情報
console.log(e.changedTouches[0])

// 1本目の指のブラウザ上の座標
console.log(e.changedTouches[0].clientX)
console.log(e.changedTouches[0].clientY)