Hi fellow wiki editors!

To help newly registered users get more familiar with the wiki (and maybe older users too) there is now a {{Welcome to the wiki}} template. Have a look at it and feel free to add it to new users discussion pages (and perhaps your own).

I have tried to keep the template short, but meaningful. /Johan G

Canvas Event Handling

From FlightGear wiki
Revision as of 05:34, 9 May 2013 by TheTom (Talk | contribs) (Created page with "Category:Canvas {{Template:Canvas Navigation}} The Canvas event handling system is heavily inspired by the [http://www.w3.org/TR/DOM-Level-3-Events/ DOM Event Model]. If ...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

The Canvas event handling system is heavily inspired by the DOM Event Model. If you have already worked with events in HTML and JavaScript most concepts of the Canvas event system should be already familiar to you.

canvas.addEventListener("<type>", <func>);
canvas_element.addEventListener("<type>", <func>);

Event classes

var Event = {
  # Name of event type [read-only]
  type: <typename>,

  # Target element [read-only]
  target: <target-element>,

  # Stop further propagation of event (stop
  # bubbling up to its parents)
  stopPropagation: func()
};

var MouseEvent = {
  parents: [Event],

  # Position in screen coordinates [read-only]
  screenX: <screen-x>,
  screenY: <screen-y>,

  # Position in window/canvas coordinates [read-only]
  clientX: <client-x>,
  clientY: <client-y>,

  # Distance to position of previous event [read-only]
  deltaX: <delta-x>,
  deltaY: <delta-y>,

  # Current click count (number of clicks within a certain
  # time limit. max. 3) [read-only]
  click_count: <click-count>
};

Event types

Type Description DOM equivalent event Notes
mousedown Mouse button pressed mousedown
mouseup Mouse button released mouseup
click mousedown + mouseup have been triggered for this element without moving more than a certain maximum distance click
dblclick Two click events have been triggered for this element without moving more than a certain maximum distance and time limit dblclick
drag The mouse has been moved with a button down. After dragging has started above an element, all consecutive drag events are send to this element even if the mouse leaves its area
wheel Mouse wheel rotated (see deltaY for direction) wheel
mouseover TODO mouseover
mouseout TODO mouseout
mouseleave TODO mouseleave