LayaAir 事件 laya.events.Event

深藏阁楼爱情的钟 2022-03-26 03:20 580阅读 0赞

**目录**

Event API

Click 单击事件

MOUSE\_DOWN 鼠标按下

MOUSE\_OVER/OUT

MOUSE\_MOVE/UP

down/up 实现触摸滑动

--------------------

# Event API #

<table> 
 <tbody> 
  <tr> 
   <td>Package</td> 
   <td>laya.events</td> 
  </tr> 
  <tr> 
   <td>类</td> 
   <td>public dynamic class Event</td> 
  </tr> 
  <tr> 
   <td>Inheritance</td> 
   <td>Event <img alt="Inheritance" src="https://layaair.ldc.layabox.com/api/images/inherit-arrow.gif"> Object</td> 
  </tr> 
 </tbody> 
</table>

子类  UIEvent。Event 是事件类型的集合，一般当发生事件时，Event 对象将作为参数传递给事件侦听器。

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Constant（常量）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#BLUR" rel="nofollow">BLUR</a> : String = blur ，[static] 定义 blur 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#CHANGE" rel="nofollow">CHANGE</a> : String = change ，[static] 定义 change 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#CHANGED" rel="nofollow">CHANGED</a> : String = changed ，[static] 定义 changed 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#CLICK" rel="nofollow">CLICK</a> : String = click ，[static] 定义 click 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#COMPLETE" rel="nofollow">COMPLETE</a> : String = complete ，[static] 定义 complete 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#DOUBLE_CLICK" rel="nofollow">DOUBLE_CLICK</a> : String = doubleclick ，[static] 定义 doubleclick 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#DRAG_END" rel="nofollow">DRAG_END</a> : String = dragend ，[static] 定义 dragend 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#DRAG_MOVE" rel="nofollow">DRAG_MOVE</a> : String = dragmove ，[static] 定义 dragmove 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#DRAG_START" rel="nofollow">DRAG_START</a> : String = dragstart，[static] 定义 dragstart 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#FOCUS" rel="nofollow">FOCUS</a> : String = focus ，[static] 定义 focus 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#FULL_SCREEN_CHANGE" rel="nofollow">FULL_SCREEN_CHANGE</a> : String = fullscreenchange ，[static] 浏览器全屏更改时触发</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#KEY_DOWN" rel="nofollow">KEY_DOWN</a> : String = keydown ，[static] 定义 keydown 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#KEY_PRESS" rel="nofollow">KEY_PRESS</a> : String = keypress ，[static] 定义 keypress 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#KEY_UP" rel="nofollow">KEY_UP</a> : String = keyup ，[static] 定义 keyup 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#MOUSE_DOWN" rel="nofollow">MOUSE_DOWN</a> : String = mousedown ，[static] 定义 mousedown 事件对象的 type 属性值。<span style="color:#f33b45;">鼠标按下</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#MOUSE_MOVE" rel="nofollow">MOUSE_MOVE</a> : String = mousemove ，[static] 定义 mousemove 事件对象的 type 属性值。<span style="color:#f33b45;">鼠标移动</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#MOUSE_OUT" rel="nofollow">MOUSE_OUT</a> : String = mouseout ，[static] 定义 mouseout 事件对象的 type 属性值。<span style="color:#f33b45;">鼠标移出</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#MOUSE_OVER" rel="nofollow">MOUSE_OVER</a> : String = mouseover ，[static] 定义 mouseover 事件对象的 type 属性值。<span style="color:#f33b45;">鼠标进入</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#MOUSE_UP" rel="nofollow">MOUSE_UP</a> : String = mouseup ，[static] 定义 mouseup 事件对象的 type 属性值。<span style="color:#f33b45;">鼠标松开</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#RESIZE" rel="nofollow">RESIZE</a> : String = resize ，[static] 定义 resize 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#SELECT" rel="nofollow">SELECT</a> : String = select ，[static] 定义 select 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#START" rel="nofollow">START</a> : String = start ，[static] 定义 start 事件对象的 type 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.events.Event#STOPPED" rel="nofollow">STOPPED</a> : String = stopped ，[static] 定义 stopped 事件对象的 type 属性值。</td> 
  </tr> 
 </tbody> 
</table>

更多 API 事件参考官网：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.events.Event][https_layaair.ldc.layabox.com_api_category_UI_class_laya.events.Event]

# Click 单击事件 #

![20190115140131174.gif][]

实现代码如下：

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
            this.btn_width = 150;//按钮的宽度
            this.btn_height = 40;//按钮的高度
    
            //使用引擎默认提供的按钮组件
            Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.createButton));
            this.createLabel();
        }
    
        /**创建 按钮 */
        createButton() {
            for (var i = 0; i < 3; i++) {
                var btn = new Laya.Button("comp/button.png");//创建一个 Button 实例，使用引擎默认提供的按钮组件
                btn.label = "媛媛" + (i + 1);//按钮上显示的文本内容
                btn.labelSize = 20;//按钮文本标签的字体大小
                btn.width = this.btn_width;//设置按钮的宽度
                btn.height = this.btn_height;//设置按钮的高度
                btn.pos(i * this.btn_width + ((i + 1) * 50), 20);//按钮显示的位置
                Laya.stage.addChild(btn);//将Button添加到舞台上
    
                //将整个舞台设置缓存为静态图像，cacheAs="normal"时，canvas模式下进行画布缓存，webgl模式下进行命令缓存
                //注意 cacheAs 静态缓存的是容器
                Laya.stage.cacheAs = "normal";
                //为按钮注册单击事件，同时将 button 传递过去，这样单击触发的时候在回调函数中好做处理
                btn.on(Laya.Event.CLICK, this, this.clickButton, [btn]);
            }
        }
    
        //按钮点击之后的回调函数
        clickButton(button) {
            console.log("当前点击：" + button.label);
            this.label_info.text = button.label;
        }
    
        //创建一个标签
        createLabel() {
            this.label_info = new Laya.Label("Nice");
            this.label_info.fontSize = 20;
            this.label_info.color = "#fff";
            this.label_info.pos(300, 80);
            Laya.stage.addChild(this.label_info);
        }
    }
    new MyClass();//运行本类

# MOUSE\_DOWN 鼠标按下 #

可以参考官网：[https://layaair.ldc.layabox.com/demo/?category=2d&group=Interaction&name=Drag][https_layaair.ldc.layabox.com_demo_category_2d_group_Interaction_name_Drag]

官网：[https://layaair.ldc.layabox.com/demo/?category=2d&group=Interaction&name=Hold][https_layaair.ldc.layabox.com_demo_category_2d_group_Interaction_name_Hold]

这里结合 [laya.display.Sprite 的 startDrag() ][laya.display.Sprite _ startDrag_]方法一起使用。

> /\*\*  
>  \* 鼠标按下后开始拖动此对象。  
>  \* @param area              （可选）拖动区域，此区域为当前对象注册点活动区域（不包括对象宽高），可选。  
>  \* @param hasInertia        （可选）鼠标松开后，是否还惯性滑动，默认为false，可选。  
>  \* @param elasticDistance   （可选）橡皮筋效果的距离值，0为无橡皮筋效果，默认为0，可选。  
>  \* @param elasticBackTime   （可选）橡皮筋回弹时间，单位为毫秒，默认为300毫秒，可选。  
>  \* @param data              （可选）拖动事件携带的数据，可选。  
>  \* @param disableMouseEvent （可选）禁用其他对象的鼠标检测，默认为false，设置为true能提高性能。  
>  \* @param ratio             （可选）惯性阻尼系数，影响惯性力度和时长。  
>  \*/  
> startDrag(area?: Rectangle, hasInertia?: boolean, elasticDistance?: number, elasticBackTime?: number, data?: any, disableMouseEvent?: boolean, ratio?: number): void;

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板*/
    
            this.createLabel();
            this.createRect();
        }
    
        //绘制约束物体移动的矩形
        createRect() {
            //矩形区域边界参数
            var pos_x = 200, pos_y = 50, width = 400, height = 200;
            //创建一个矩形-用来约束物体只能在此矩形内移动。此矩形只描述边界，与 Graphics.drawRect 绘制的矩形是不一样的
            //这个矩形的作用是用于在 Sprite.startDrag 函数中作为参数传入，所以不用添加到舞台或者其它任何父节点
            this.rect = new Laya.Rectangle();
            this.rect.x = pos_x;
            this.rect.y = pos_y;
            this.rect.width = width;
            this.rect.height = height;
            console.log("Rectangle=" + this.rect.toString());
    
            //上面的矩形只能描述边界信息，是无非描边、设置背景色的。这里手动绘制一个矩形，这样肉眼才能看得见
            var sp = new Laya.Sprite();
            sp.graphics.drawRect(pos_x, pos_y, width, height, null, "#383838");
            // sp.graphics.drawRect(pos_x, pos_y, width + this.label_info.width, height + this.label_info.height, null, "#383838");
            Laya.stage.addChild(sp);
        }
    
        //创建一个标签，用于移动
        createLabel() {
            this.label_info = new Laya.Label("奋六世之余烈");
            this.label_info.fontSize = 30;
            this.label_info.color = "#fff";
            this.label_info.pos(300, 120);
            Laya.stage.addChild(this.label_info);
    
            //为标签 Label 绑定鼠标按下事件
            this.label_info.on(Laya.Event.MOUSE_DOWN, this, function () {
                /**开始拖动此对象
                 * startDrag(area?: Rectangle, hasInertia?: boolean, elasticDistance?: number, elasticBackTime?: number, data?: any, disableMouseEvent?: boolean, ratio?: number)
                 * area：（可选）拖动区域，此区域为当前对象注册点活动区域（不包括对象宽高），可选。传入的是 Rectangle 对象
                 * hasInertia：（可选）鼠标松开后，是否还惯性滑动，默认为false，可选。
                 * elasticDistance：（可选）橡皮筋效果的距离值，0为无橡皮筋效果，默认为0，可选。
                 * elasticBackTime：（可选）橡皮筋回弹时间，单位为毫秒，默认为300毫秒，可选。
                 * data：（可选）拖动事件携带的数据，可选。
                 * disableMouseEvent:（可选）禁用其他对象的鼠标检测，默认为false，设置为true能提高性能。
                 * ratio:（可选）惯性阻尼系数，影响惯性力度和时长。
                 */
                this.label_info.startDrag(this.rect, true, 30, 100);
            });
        }
    }
    new MyClass();//运行本类

![20190116094204250.gif][]

方向底部和右侧会出现越界的情况，这里修改其中一行代码：

sp.graphics.drawRect(pos_x, pos_y, width + this.label_info.width, height + this.label_info.height, null, "#383838");

![20190116094419189.gif][]

# MOUSE\_OVER/OUT #

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板*/
            this.createRect();
        }
        //绘制矩形及填充文字
        createRect() {
            this.sp_width = 200;
            this.sp_height = 50;
            var sp_rect = new Laya.Sprite();
            sp_rect.pos(300, 30);//精灵的位置 
            sp_rect.size(this.sp_width, this.sp_height);//精灵的尺寸
            sp_rect.graphics.drawRect(0, 0, this.sp_width, this.sp_height, "#383838");//精灵绘制矩形，相对位置
            sp_rect.graphics.fillText("奋六世之余烈", this.sp_width / 2, 15, "20px Arial", "#fff", "center");//填充文字，相对位置
            Laya.stage.addChild(sp_rect);
            this.rectContrl(sp_rect);//矩形按钮事件控制
        }
        //矩形控制
        rectContrl(sp_rect) {
            //为矩形绑定鼠标移入事件
            sp_rect.on(Laya.Event.MOUSE_OVER, this, function () {
                //精灵内容进行重绘
                sp_rect.graphics.drawRect(0, 0, this.sp_width, this.sp_height, "#007ACC");
                sp_rect.graphics.fillText("奋六世之余烈", this.sp_width / 2, 15, "20px Arial", "#fff", "center");
            });
            //为矩形绑定鼠标移出事件
            sp_rect.on(Laya.Event.MOUSE_OUT, this, function () {
                //精灵内容进行重绘
                sp_rect.graphics.drawRect(0, 0, this.sp_width, this.sp_height, "#383838");
                sp_rect.graphics.fillText("奋六世之余烈", this.sp_width / 2, 15, "20px Arial", "#fff", "center");
            });
        }
    }
    new MyClass();//运行本类

![20190116102205298.gif][]

# MOUSE\_MOVE/UP #

[MOUSE\_MOVE][MOUSE_MOVE] : String = mousemove ，\[static\] 定义 mousemove 事件对象的 type 属性值。鼠标移动

![20190116112859220.gif][]

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板*/
            this.setup();
        }
        setup() {
            var sp_cicle = this.createCircle();
            sp_cicle.pos(-sp_cicle.width, 0);//精灵的初始位置，让它显示在舞台外面
            //为舞台绑定鼠标移动事件
            Laya.stage.on(Laya.Event.MOUSE_MOVE, this, function () {
                /**精灵(圆形)的位置跟着鼠标的位置移动
                 * mouseX：鼠标在 Stage 上的 X 轴坐标；mouseY：鼠标在 Stage 上的 Y 轴坐标*/
                sp_cicle.pos(Laya.stage.mouseX, Laya.stage.mouseY);
            });
            //为舞台绑定鼠标松开事件
            Laya.stage.on(Laya.Event.MOUSE_UP, this, function () {
                //鼠标松开时，在松开的位置固定显示一个圆形
                var cicle_up = this.createCircle();
                cicle_up.pos(Laya.stage.mouseX, Laya.stage.mouseY);
            });
        }
        //绘制一个圆形
        createCircle() {
            var sp_width = 20, sp_height = 20;
            var sp_cicle = new Laya.Sprite();
            sp_cicle.size(sp_width, sp_height);//精灵的尺寸
            sp_cicle.graphics.drawCircle(0, 0, sp_width / 2, "#f00");
            Laya.stage.addChild(sp_cicle);
            return sp_cicle;
        }
    }
    new MyClass();//运行本类

# down/up 实现触摸滑动 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

class MyClass {
        constructor() {
            // Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
            Laya.stage.alignH = "center";
            Laya.stage.alignV = "center";
            Laya.Stat.show(0, 0);/**显示性能面板 */
            this.createText();
            this.mouseMoveCheck();
        }
    
        //创建文本
        createText() {
            this.text_my = new Laya.Text();
            this.text_my.text = "触摸滑动";
            this.text_my.fontSize = 30;
            this.text_my.color = "#f00";
            this.text_my.pos(Laya.stage.width / 2 - this.text_my.width / 2, 80);
            Laya.stage.addChild(this.text_my);
        }
    
        //舞台鼠标移动监测
        mouseMoveCheck() {
            // (touch_start_X,touch_start_Y)：手指按下时的坐标
            var touch_start_X = 0, touch_start_Y = 0;
            //手指/鼠标按下时
            Laya.stage.on(Laya.Event.MOUSE_DOWN, this, function () {
                touch_start_X = Laya.stage.mouseX;
                touch_start_Y = Laya.stage.mouseY;
                console.log("触摸起点坐标：" + touch_start_X + "," + touch_start_Y);
            });
            //手指/鼠标松开时
            Laya.stage.on(Laya.Event.MOUSE_UP, this, function () {
                var touch_current_X = Laya.stage.mouseX;
                var touch_current_Y = Laya.stage.mouseY;
                console.log("触摸终点坐标：" + touch_current_X + "," + touch_current_Y);
                if (Math.abs(touch_current_X - touch_start_X) > Math.abs(touch_current_Y - touch_start_Y) && touch_current_X > touch_start_X) {
                    this.text_my.text = "右滑动";
                } else if (Math.abs(touch_current_X - touch_start_X) > Math.abs(touch_current_Y - touch_start_Y) && touch_current_X < touch_start_X) {
                    this.text_my.text = "左滑动";
                } else if (Math.abs(touch_current_X - touch_start_X) < Math.abs(touch_current_Y - touch_start_Y) && touch_current_Y > touch_start_Y) {
                    this.text_my.text = "下滑动";
                } else if (Math.abs(touch_current_X - touch_start_X) < Math.abs(touch_current_Y - touch_start_Y) && touch_current_Y < touch_start_Y) {
                    this.text_my.text = "上滑动";
                }
            });
        }
    }
    new MyClass();//运行本类

![20190121152347361.gif][]

[https_layaair.ldc.layabox.com_api_category_UI_class_laya.events.Event]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.events.Event
[20190115140131174.gif]: /images/20220326/9cb7fb1a18824d628512ffead29e487d.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_Interaction_name_Drag]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Interaction&name=Drag
[https_layaair.ldc.layabox.com_demo_category_2d_group_Interaction_name_Hold]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Interaction&name=Hold
[laya.display.Sprite _ startDrag_]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#startDrag%28%29
[20190116094204250.gif]: /images/20220326/31414546a7a64f7e9554ea87ebde2bea.png
[20190116094419189.gif]: /images/20220326/ed0e46a108c94601a1b84ee449f31c2a.png
[20190116102205298.gif]: /images/20220326/96856b3888d3450d8bdeee65560d5b19.png
[MOUSE_MOVE]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.events.Event#MOUSE_MOVE
[20190116112859220.gif]: /images/20220326/b341b8e4a08142959c23d4d8e7972ddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220326/da82d1ee63654138951c7eec29f602a0.png
[20190121152347361.gif]: /images/20220326/dba5377f8f3d4dd3a9dd89f28e70aa53.png