In EaselJS, you can get access to all mouse events, such as click, mouse up, and so on. A MouseEvent
instance is passed as the only parameter for all mouse event callbacks. It includes the stageX
and stageY
properties, which indicate the cursor's position relative to the stage coordinates.
In the following example, pressed
will be logged on to the console when the mouse is clicked over the circle; thereafter, mouse moves will be logged whenever the mouse moves until the mouse is released.
circle.on("mousedown", function(mousedownEvent) { console.log("pressed"); circle.on("pressmove", function(moveEvent) { console.log("mouse moved: "+moveEvent.stageX+","+moveEvent.stageY); }); });
As you can see, we can simply bind a mouse event to our DisplayObject
object and then read or alter the properties on each event callback. The following screenshot displays the output of the previous example along with the details of mouse events:
In the next section, we will put all these things together and create a simple drag-and-drop interaction.
18.226.98.208