Exhibit #2: Handling Mouse Events

Demo

What We Did

• The browser records a number of mouse events:
  • A mousemove event when the mouse pointer moves over the target element.
  • A mousedown event when a mouse button is pressed over the target element.
  • A mouseup event when a mouse button is released over the target element.
  • A mouseenter event when the mouse pointer enters the target element.
  • A mouseleave event when the mouse pointer leaves the target element.
  • A click event when target element is clicked.
  • A dblclick event 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 was pressed when the event was fired.
  altKey	Boolean	Whether the Alt key was pressed when the event was fired.
  shiftKey	Boolean	Whether the Shift key was pressed when the event was fired.
  metaKey	Boolean	Whether the Meta key was 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.
    • Example: $("#webglCanvas")[0].getBoundingClientRect()
    • NB: You cannot call this method on a jQuery wrapped collection. This method is defined for DOM objects only.
  • 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 the Y coordinate relative to the bottom edge!!!