Exhibit #2: Handling Mouse Events

What are We Doing?

• The browser fires a number of mouse events.
  • mousemove when the mouse pointer moves over the target element.
  • mousedown when a mouse button is pressed over the target element.
  • mouseup when a mouse button is released over the target element.
  • mouseenter when the mouse pointer enters the target element.
  • mouseleave when the mouse pointer leaves the target element.
  • click when target element is clicked.
  • dblclick when target element is double clicked.
• We can use jQuery to assign handlers to these events.
  • $(<selector>).<event-name>(<handler>)
  • For example:

    $("#webglCanvas").mouseenter(function (event) {
        console.log("mouse entered!");
    });

• An event handler is a function which receives a MouseEvent object.
• The MouseEvent object includes the following useful fields:

  Name	Type	Meaning
  clientX	Integer	The X coordinate of the mouse pointer in local (DOM content) coordinates.
  clientY	Integer	The Y coordinate of the mouse pointer in local (DOM content) coordinates.
  screenX	Integer	The X coordinate of the mouse pointer in global (screen) coordinates.
  screenY	Integer	The Y coordinate of the mouse pointer in global (screen) coordinates.
  button	Integer	The button number that was pressed when the mouse event was fired.
  ctrlKey	Boolean	Whether the Ctrl key is pressed when the event was fired.
  altKey	Boolean	Whether the Alt key is pressed when the event was fired.
  shiftKey	Boolean	Whether the Shift key is pressed when the event was fired.
  metaKey	Boolean	Whether the Meta key (Mac) is pressed when the event was fired.

• To find the where the mouse is inside the target element, use the bounding client rectangle of the element.
  • You can get this by calling the getBoundingClientRect() method of the element.
    • This is the method of the DOM object, not a jQuery method.
    • Be careful. You cannot call it from a jQuery wrapped collection.
    • Example: $("#webglCanvas")[0].getBoundingClientRect()
  • Then, you can calculate the mouse position relative to the object using event.clientX and event.clientY.
    • The X position relative to the left edge is event.clientX - clientRect.left.
    • The Y position relative to the top edge is event.clientY - clientRect.top.
  • Be careful though. WebGL measures Y coordinate relative to the bottom edge!!!

Demo