HTML5 Game - Canvas Event Mouse events

  1. HOME
  2. HTML5 Game
  3. Canvas Event
  4. Mouse Event

Introduction

To capture a mouse event, add a listener to a DOM element to handle the event.

Mouse event types are defined by strings.

Here is a list of the most common ones:

  • mousedown
  • mouseup
  • click
  • dblclick
  • mousewheel
  • mousemove
  • mouseover
  • mouseout

The following code prints to the console each mouse event as it occurs on the canvas element.

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mouse Events</title>
    <style>canvas{border:1px solid red;}</style>
  </head>/*from   w w  w .  j a v a  2  s .com*/
  <body>

    <canvas id="canvas" width="400" height="400"></canvas>
    <aside>Open debugging console in web browser and move/click mouse.</aside>
    
    <script>
    window.onload = function () {
      let canvas = document.getElementById('canvas');

      function onMouseEvent (event) {
        console.log(event.type);
      }

      canvas.addEventListener('mousedown', onMouseEvent, false);
      canvas.addEventListener('mouseup', onMouseEvent, false);
      canvas.addEventListener('click', onMouseEvent, false);
      canvas.addEventListener('dblclick', onMouseEvent, false);
      canvas.addEventListener('mousewheel', onMouseEvent, false);
      canvas.addEventListener('mousemove', onMouseEvent, false);
      canvas.addEventListener('mouseover', onMouseEvent, false);
      canvas.addEventListener('mouseout', onMouseEvent, false);
    };
    </script>
  </body>
</html>

Related Topic