You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At its core, the EaselJS mouse interaction model is very simple to use - just assign a listener to a mouse events via the <code>addEventListener</code> method on a display object:
39
+
At its core, the EaselJS mouse interaction model is very simple to use - just assign a listener to a
40
+
mouse events via the <code>addEventListener</code> method on a display object:
There are a number of events you can listen for on display objects: <code>click</code>, <code>mousedown</code>, <code>mouseup</code>, <code>dblclick</code>, <code>pressmove</code>, <code>pressup</code>, <code>mouseover</code> / <code>mouseout</code>, and <code>rollover</code> / <code>rollout</code>.
47
+
There are a number of events you can listen for on display objects: <code>click</code>,
<code>pressup</code>, <code>mouseover</code> / <code>mouseout</code>, and <code>rollover</code> /
50
+
<code>rollout</code>.
45
51
</p>
46
52
<p>
47
-
The latter four events have some overhead associated with them, so you need to enable them with <code>stage.enableMouseOver(frequency)</code>. The <code>frequency</code> parameter indicates how many times per second EaselJS should calculate what is currently under the pointer. A higher number is more responsive, but also more computationally expensive. It defaults to 20 times per second.
53
+
The latter four events have some overhead associated with them, so you need to enable them with
54
+
<code>stage.enableMouseOver(frequency)</code>. The <code>frequency</code> parameter indicates how many
55
+
times per second EaselJS should calculate what is currently under the pointer. A higher number is more
56
+
responsive, but also more computationally expensive. It defaults to 20 times per second.
48
57
</p>
49
58
<p>
50
-
The <code>on</code> method provides a shortcut to <code>addEventListener</code>, and adds additional functionality. See the API docs for more details.
59
+
The <code>on</code> method provides a shortcut to <code>addEventListener</code>, and adds additional
When a mouse handler is triggered, it is called with a single parameter holding a MouseEvent instance. You can use this object to see what <code>type</code> of event it was, what the <code>target</code> was, get access to the <code>nativeEvent</code> object it was based on, and to check the pointer's <code>stageX</code> and <code>stageY</code> coordinates.
72
+
When a mouse handler is triggered, it is called with a single parameter holding a MouseEvent instance.
73
+
You can use this object to see what <code>type</code> of event it was, what the <code>target</code> was,
74
+
get access to the <code>nativeEvent</code> object it was based on, and to check the pointer's
75
+
<code>stageX</code> and <code>stageY</code> coordinates.
When a mouse event is triggered on a target, the event flows through three phases: the capture phase, the target phase, and the bubbling phase.
90
+
When a mouse event is triggered on a target, the event flows through three phases: the capture phase,
91
+
the target phase, and the bubbling phase.
78
92
</p>
79
93
<p>
80
-
In the first phase (capture), the event is dispatched starting with the stage, and progressing through the ancestors of the target to its immediate parent.
94
+
In the first phase (capture), the event is dispatched starting with the stage, and progressing through
95
+
the ancestors of the target to its immediate parent.
81
96
Only listeners that were added using the useCapture parameter are triggered in this phase.
82
97
</p>
83
98
<p>
84
-
In the second phase (target), the event is dispatched on the target object (ex. the element that was clicked).
99
+
In the second phase (target), the event is dispatched on the target object (ex. the element that was
100
+
clicked).
85
101
</p>
86
102
<p>
87
-
In the final phase (bubbling), the event is dispatched from the immediate parent of the target through the ancestors (in the reverse order of the capture phase) to the stage.
103
+
In the final phase (bubbling), the event is dispatched from the immediate parent of the target through
104
+
the ancestors (in the reverse order of the capture phase) to the stage.
88
105
</p>
89
106
<p>
90
-
The example below has a "button", which is a <code>Container</code> instance containing two children: a background shape, and a text label.
91
-
All three display objects and the stage have listeners for the "click" event both with and without the useCapture param.
107
+
The example below has a "button", which is a <code>Container</code> instance containing two children: a
108
+
background shape, and a text label. All three display objects and the stage have listeners for the
109
+
"click" event both with and without the useCapture param.
You can prevent the children of a <code>Container</code> from dispatching mouse events setting <code>mouseChildren</code> to <code>false</code>.
119
+
You can prevent the children of a <code>Container</code> from dispatching mouse events setting
120
+
<code>mouseChildren</code> to <code>false</code>.
102
121
<textareaclass="brush: js;" readonly>
103
122
myContainer.mouseChildren = false;
104
123
</textarea>
105
124
</p>
106
125
<p>
107
-
This causes the container to be treated as an aggregate element for mouse interactions. For example, in the bubbling example above setting <code>button.mouseChildren = false;</code>
108
-
would make it so that clicking children of the button (background & label) dispatches the click event with the button as the target instead of the child that was clicked.
126
+
This causes the container to be treated as an aggregate element for mouse interactions. For example, in
127
+
the bubbling example above setting <code>button.mouseChildren = false;</code>
128
+
would make it so that clicking children of the button (background & label) dispatches the click event
129
+
with the button as the target instead of the child that was clicked.
109
130
</p>
110
131
<p>
111
-
Similarly, you can completely disable mouse events on any display object without removing its handlers by setting <code>mouseEnabled</code> to <code>false</code>.
132
+
Similarly, you can completely disable mouse events on any display object without removing its handlers
133
+
by setting <code>mouseEnabled</code> to <code>false</code>.
Normally, EaselJS will calculate mouse hits on a display object based on its visible, non-transparent pixels. This usually works pretty well, but there may be cases where you want to define a hit target that is different than what is displayed on screen.
145
+
Normally, EaselJS will calculate mouse hits on a display object based on its visible, non-transparent
146
+
pixels. This usually works pretty well, but there may be cases where you want to define a hit target that is different than what is displayed on screen.
124
147
</p>
125
148
<p>
126
-
To do this, you can assign any other display object to be the <code>hitArea</code> for your object. It does not need to be on the display list, and will not be visible, but it will be used for the hit test instead.
149
+
To do this, you can assign any other display object to be the <code>hitArea</code> for your object.
150
+
It does not need to be on the display list, and will not be visible, but it will be used for the hit test instead.
127
151
</p>
128
152
<p>
129
-
Hit area display objects are used within the coordinate system (ie. concatenated transformation) of their owner, and as such you can reuse the same display object as the <code>hitArea</code> of multiple objects.
153
+
Hit area display objects are used within the coordinate system (ie. concatenated transformation) of
154
+
their owner, and as such you can reuse the same display object as the <code>hitArea</code> of multiple objects.
130
155
</p>
131
156
<iframesrc="hitArea.html" class="demo" longDesc="mouse event handlers on containers" width="100%" height="170px"></iframe>
132
157
<p>
133
-
Notice how in this demo, as you roll over the red text, it only registers a hit when the pointer is over a non-transparent pixel, whereas the blue text uses the rectangular <code>hitArea</code> to calculate the hit.
158
+
Notice how in this demo, as you roll over the red text, it only registers a hit when the pointer is
159
+
over a non-transparent pixel, whereas the blue text uses the rectangular <code>hitArea</code> to calculate the hit.
134
160
</p>
135
161
</section>
136
162
@@ -139,12 +165,16 @@ <h2>hitArea</h2>
139
165
<h2>Stage mouse events</h2>
140
166
</header>
141
167
<p>
142
-
For the stage, just like every other display object, you will only get events when the mouse is over a non-transparent pixel.
168
+
For the stage, just like every other display object, you will only get events when the mouse is over a
169
+
non-transparent pixel.
143
170
</p>
144
171
<p>
145
-
Stage has a few special mouse events that come in handy for responding to general mouse interactions anywhere within your canvas. <code>stagemousedown</code>, <code>stagemouseup</code>, and <code>stagemousemove</code> are called any time a relevant mouse interaction happens anywhere on the canvas.
172
+
Stage has a few special mouse events that come in handy for responding to general mouse interactions
173
+
anywhere within your canvas. <code>stagemousedown</code>, <code>stagemouseup</code>, and
174
+
<code>stagemousemove</code> are called any time a relevant mouse interaction happens anywhere on the
alert("the canvas was clicked at "+evt.stageX+","+evt.stageY);
149
179
})
150
180
</textarea>
@@ -156,7 +186,11 @@ <h2>Stage mouse events</h2>
156
186
By default, you will stop getting <code>stagemousemove</code> events whenever the pointer is outside of the canvas.
157
187
</p>
158
188
<p>
159
-
If you'd like to keep getting <code>stagemousemove</code> events when the pointer leaves the canvas, just set <code>mouseMoveOutside</code> to <code>true</code>. The <code>stageX</code> & <code>stageY</code> properties of <code>MouseEvent</code> will always return a value normalized to within your stage bounds, but you can use <code>rawX</code> and <code>rawY</code> to get values that haven't been normalized (this can cause errors if you aren't careful).
189
+
If you'd like to keep getting <code>stagemousemove</code> events when the pointer leaves the canvas,
190
+
just set <code>mouseMoveOutside</code> to <code>true</code>. The <code>stageX</code> &
191
+
<code>stageY</code> properties of <code>MouseEvent</code> will always return a value normalized to
192
+
within your stage bounds, but you can use <code>rawX</code> and <code>rawY</code> to get values that
193
+
haven't been normalized (this can cause errors if you aren't careful).
160
194
<textareaclass="brush: js;" readonly>
161
195
stage.mouseMoveOutside = true;
162
196
stage.on("stagemousemove", function(evt) {
@@ -166,7 +200,8 @@ <h2>Stage mouse events</h2>
166
200
</textarea>
167
201
</p>
168
202
<p>
169
-
You can monitor whether the pointer is over the canvas by using <code>stage.mouseInBounds</code> and the <code>mouseleave</code> / <code>mouseenter</code> events.
203
+
You can monitor whether the pointer is over the canvas by using <code>stage.mouseInBounds</code> and the
0 commit comments