Type class
Interaction object represents an object that is subject for any kind of interaction with it with any input devices: mouse, touch or keyboard.
Any DOM element can be wrapped into an Internaction object which in turn enables attaching various interaction events to it, such as: hit, drag, swipe, etc.
To create an InteractionObject
out of a Sprite
, use:
interaction.getInteractionFromSprite(sprite: Sprite)
To create an InteractionObject
out of a a regular element:
interaction.getInteraction(element: HTMLElement)
Sources
InteractionObject can be used (imported) via one of the following packages.
/** * -------------------------------------------------------- * Import from: "core.ts" * Use like: am4core.InteractionObject * -------------------------------------------------------- */ import * as am4core from "@amcharts/amcharts4/core";
/** * -------------------------------------------------------- * Include via: <script src="core.js"></script> * Access items like: am4.InteractionObject * -------------------------------------------------------- */
Inheritance
InteractionObject extends BaseObjectEvents
.
InteractionObject is not extended by any other symbol.
Properties
clickable # |
Type Is element clickable? Clickable elements will generate "hit" events when clicked or tapped. |
---|---|
clonedFrom # |
Type Inherited from Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed. |
config # |
Type Inherited from Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc. Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations. |
contextMenuDisabled # |
Type Default Should element prevent context menu to be displayed, e.g. when right-clicked? |
cursorOptions # |
Type Cursor options. |
downPointers # |
A list of pointers currently pressing down on this element.
|
draggable # |
Type Indicates if element can be dragged. (moved) |
element # |
Type A DOM element associated with this element. |
events # |
Type An |
focusable # |
Type Indicates if element can gain focus. |
hitOptions # |
Type Hit options. |
hoverOptions # |
Type Hover options. |
hoverable # |
Type Indicates if element should generate hover events. |
id # |
Type Inherited from Sets the user-defined id of the element. |
inert # |
Type Indicates if element is inert, i.e. if it should carry movement momentum after it is dragged and released. |
inertiaOptions # |
Type Inertia options. |
isDown # |
Type Indicates if this element has currently any pointers pressing on it. |
isFocused # |
Type Indicates if this element is currently focused. |
isHover # |
Type Indicates if this element is currently hovered. |
isHoverByTouch # |
Type Indicates if this element is currently hovered. |
keyboardOptions # |
Type Keyboard options. |
mouseOptions # |
Type Mouse options. Enables controlling options related to the mouse, for example sensitivity of its mouse wheel. E.g. the below will reduce chart's wheel-zoom speed to half its default speed: chart.plotContainer.mouseOptions.sensitivity = 0.5; chart.plotContainer.mouseOptions.sensitivity = 0.5; { // ... "plotContainer": { "mouseOptions": { "sensitivity": 0.5 } } } @since 4.5.14 |
overPointers # |
A list of pointers currently over the element.
|
resizable # |
Type Indicates if element can be resized. |
sprite # |
Type A related |
swipeOptions # |
Type Swipe options. |
swipeable # |
Type Indicates whether element should react to swipe gesture. |
tabindex # |
Type Element's tab index. |
trackable # |
Type Indicates if pointer movement over element should be tracked. |
uid # |
Type Inherited from Returns object's internal unique ID. |
wheelable # |
Type Indicates whether track moouse wheel rotation over element. |
There are 4 inherited items currently hidden from this list. |
Methods
clone( cloneId?: ) |
Returns Inherited from Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them. |
---|---|
constructor( element: ) |
Returns Constructor |
copyFrom( source: ) |
Returns Copies all properties and related assets from another object of the same type. |
dispatch( eventType: ) |
Returns Inherited from Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element). It also checks if there are any handlers registered for this sepecific event. |
dispatchImmediately( eventType: ) |
Returns Inherited from Works like |
dispose() |
Returns Disposes object. |
getCurrentThemes() |
Returns Inherited from Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide. |
isDisposed() |
Returns Inherited from Returns if this object has been already been disposed. |
There are 5 inherited items currently hidden from this list. |
Events
#blur |
Param { event: Invoked when |
---|---|
#doublehit |
Param Invoked when object is clicked or touched twice in rapid succession. Check |
#down |
Param Invoked when the mouse button is pressed or touch starts. |
#drag |
Param Invoked when |
#dragstart |
Param Invoked when |
#dragstop |
Param Invoked when |
#focus |
Param { event: Invoked when |
#hit |
Param Invoked when object is clicked or touched. |
#input |
Param { event: Invoked whenever information changes in the textual input elements, like |
#keydown |
Param { event: Invoked when the key is pressed on the keyboard. |
#keypress |
Param { event: Invoked when the key generates a "press", e.g. pressing and holding a letter key will generate repeated "keypress" events. |
#keyup |
Param { event: Invoked when the key is released on the keyboard. |
#out |
Param Invoked when mouse cursor moves out of NOTE: this event might not always contains |
#over |
Param Invoked when mouse cursor moves over NOTE: this event might not always contains |
#resize |
Param Invoked when |
#rightclick |
Param { type: Invoked when right mouse button is clicked on the object. |
#swipe |
Param Invoked when user performs "swiping" gesture (quick horizontal movement) on the object, either using mouse or touch. |
#swipeleft |
Param Invoked when user performs "swiping" gesture towards left. |
#swiperight |
Param Invoked when user performs "swiping" gesture towards right. |
#track |
Param Invoked when pointer (mouse cursor or touch point) moves over |
#up |
Param Invoked when the mouse button is released or touch ends. |
#wheel |
Param Invoked when user turns mouse wheel while over the object. |
#wheeldown |
Param Invoked when user turns mouse wheel downwards while over the object. |
#wheelleft |
Param Invoked when user turns mouse wheel leftwards while over the object. |
#wheelright |
Param Invoked when user turns mouse wheel rightwards while over the object. |
#wheelup |
Param Invoked when user turns mouse wheel upwards while over the object. |
Adapters
InteractionObject does not have any adapters.