在 JavaScript 和 Adobe Animate（CreateJS） 中，常用的鼠标交互事件可分为两大类：基础 DOM 事件 和 CreateJS 扩展事件12。以下是完整分类：
一、基础 DOM 鼠标事件
| 事件名 | 触发场景 | 冒泡特性 |
|---|---|---|
click | 鼠标左键单击元素时触发 | 是 |
dblclick | 鼠标左键双击元素时触发 | 是 |
mousedown | 鼠标按键按下（左/中/右键）时触发 | 是 |
mouseup | 鼠标按键释放时触发 | 是 |
mousemove | 鼠标在元素内移动时触发 | 是 |
mouseover | 鼠标进入元素或其子元素时触发 | 是 |
mouseout | 鼠标离开元素或其子元素时触发 | 是 |
mouseenter | 鼠标进入元素本身时触发（不冒泡） | 否 |
mouseleave | 鼠标离开元素本身时触发（不冒泡） | 否 |
contextmenu | 右键点击触发菜单时触发 | 是 |
二、CreateJS 特有扩展事件
| 事件名 | 触发场景 | 特性说明 |
|---|---|---|
pressmove | 鼠标按下后移动时持续触发（常用于拖拽） | 连续触发 |
pressup | 鼠标按键释放时触发（对应 mouseup） | 单次触发 |
rollover | 鼠标进入显示对象时触发（类似 mouseenter） | 不冒泡 |
rollout | 鼠标离开显示对象时触发（类似 mouseleave） | 不冒泡 |
javascriptCopy Code
// CreateJS 示例：拖拽交互 sprite.on("pressmove", (evt) => { evt.target.x = evt.stageX; evt.target.y = evt.stageY; });
三、事件选择建议
-
优先使用
mouseenter/leave
替代mouseover/out，避免子元素触发导致的频繁回调36。 -
拖拽交互必用
pressmove
相比mousemove，pressmove仅在按下时触发，避免误操作48。 -
移动端适配
需同时监听touchstart和mousedown事件以兼容触屏设备47。
四、完整事件流示例
javascriptCopy Code
// 基础事件流 element.on("mousedown", () => console.log("按下")); element.on("pressmove", () => console.log("移动中")); element.on("pressup", () => console.log("释放")); // 点击事件流 element.on("click", () => console.log("单击完成"));
通过合理选择事件类型，可实现精准的交互控制24。