前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

分手后的思念是犯贱 2021-09-12 05:34 1950阅读 0赞

## 一.鼠标交互事件概念 ##

鼠标事件交互是指用户通过操作鼠标所触发的事件。常用的交互事件主要有如点击、拖拽等。可以监听到的用户所触发的事件可以分为4类：左键触发，右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。如监听点击事件，源码写法是：

sprite.on('click', onClick);

### 其中onClick是触发点击事件后回调的方法。 ###

### 1.鼠标左键触发事件： ###

click：点击事件  
mousedown：鼠标按下  
mousemove：鼠标移动  
mouseout：鼠标移出  
mouseover：鼠标经过  
mouseup：鼠标松开  
mouseupoutside：鼠标按下，移出对象松开

### 2.鼠标右键触发事件： ###

rightclick：点击事件  
rightdown：鼠标按下  
rightup：鼠标松开  
rightupoutside：鼠标按下，移出对象松开

### 3.触摸屏触发事件： ###

touchcancel：触摸系统cancels键  
touchend：触摸结束  
touchendoutside：触摸开始，移出对象松开  
touchmove：触摸移动  
touchstart：触摸开始

### 4.兼容鼠标和触摸屏的共同触发： ###

pointercancel：触发系统cancels键  
pointerdown：触发按下  
pointermove：触发移动  
pointerout：触发移出  
pointerover：触发经过  
pointertap：触发点击  
pointerup：触发松开

（注）一般在应用中使用第四种交互事件触发，即兼容触发。

## 二.参考案例 ##

交互事件在前端常用于实现按钮的三种状态触发：按下、松开、经过。要实现这种效果，我们可以使用下面的代码：

![Center][]

![Center 1][]

![Center 2][]

除了以上的交互事件外，还有一种常用的鼠标交互实现就是对显示对象的拖拽，拖拽源码实现如下：其中.dragging属性并不是sprite自带属性，为自定义属性，是为了触发onDragMove后判断所需。所以读者们不要误认为是自带属性。

（注）要注册交互事件前，一定要把显示对象的interactive和buttonMode属性设为true。

[Center]: /images/20210813/db8f0c89447441299d8299ade90a7f9d.png
[Center 1]: /images/20210813/f4bc1a175fee44b986eaf71597bf1f31.png
[Center 2]: /images/20210813/dfc66d8d6f2241afa1792ee7b0deb800.png

前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端动画交互

相关前端动画渲染引擎pixi.js系列（9）如何生成缩略图

相关前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones

相关前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果

相关前端动画渲染引擎pixi.js系列（7）粒子容器、遮罩层和滤镜的应用

相关前端动画渲染引擎pixi.js系列（6）副本实现和平铺精灵TilingSprite

相关前端动画渲染引擎pixi.js系列（5）Text文本和Graphics画笔工具

相关前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

相关前端动画渲染引擎pixi.js系列（2）container和Sprite的概念和继承关系

相关前端动画渲染引擎pixi.js系列（1）简单介绍及应用