Canvas event handling
Jump to navigation
Jump to search
The FlightGear forum has a subforum related to: Canvas |
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 |