Animate 中HTMLCanvas 画布下的鼠标事件列表（DOM 鼠标）

在 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; });

---

三、事件选择建议

1. ‌优先使用 mouseenter/leave‌
   替代 mouseover/out，避免子元素触发导致的频繁回调36。

2. ‌拖拽交互必用 pressmove‌
   相比 mousemove，pressmove 仅在按下时触发，避免误操作48。

3. ‌移动端适配‌
   需同时监听 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。