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）不冒泡

1. [/code] javascriptCopy Code
2. // CreateJS 示例：拖拽交互 sprite.on("pressmove", (evt) => { evt.target.x = evt.stageX; evt.target.y = evt.stageY; });
3. [hr] [size=3]三、事故选择建议[/size]
5. [list=1]
6. [*] ‌[b]优先使用 mouseenter/leave[/b]‌
7. 替代 mouseover/out，制止子元素触发导致的频繁回调36。
8. [*] ‌[b]拖拽交互必用 pressmove[/b]‌
9. 相比 mousemove，pressmove 仅在按下时触发，制止误操作48。
10. [*] ‌[b]移动端适配[/b]‌
11. 需同时监听 touchstart 和 mousedown 事故以兼容触屏设备47。
12. [/list] [hr] [size=3]四、完整事故流示例[/size]
14. [code]

复制代码

javascriptCopy Code
// 基础事故流 element.on("mousedown", () => console.log("按下")); element.on("pressmove", () => console.log("移动中")); element.on("pressup", () => console.log("开释")); // 点击事故流 element.on("click", () => console.log("单击完成"));
通过合理选择事故类型，可实现精准的交互控制24。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。