cocosCreator 之 组件触摸事件汇总

版本: 3.4.0
节点事件系统
事件API

UITransform

---

本文主要讲述组件脚本中如何使用节点和组件相关的事件。

先了解UITransform组件，它的主要功能：

• 设置节点的大小和锚点
• 作为2D UI节点的触摸事件监听

该组件是在creator 3.x版本有的，在之前的版本中，获取节点的大小和锚点，直接通过Node即可，在3.x需要：

const transform = this.node.getComponent(UITransform);
const size = transform.contentSize;

因可作为触摸事件监听，因此可以通过改变该组件的大小，来设置触摸区域大小。

在cocosCreator 中节点的事件是支持冒泡传递的，因此需要考虑一种情况是： 防透点

它多出现在页面二级窗口弹出的时候，或者多个全屏页面显示的情况下。

可以使用官方提供的组件： BlockInputEvents， 直接调用即可， 较为详细的步骤：

• 创建一个2D对象的单色精灵SpriteSplash
• 通过组件UITransform设定大小为屏幕大小
• 通过组件Sprite 设置颜色为黑色，透明度为180
• 属性检查器增加组件Widget, 宽高度拉伸均为0， 用于屏幕适配
• 属性检查器增加组件BlockInputEvents，用于防透点

这样就实现了我们想要的效果。

cocosCreator提供了很方便的接口用于处理节点的鼠标事件、触摸事件等，以触摸结束事件为例：

onEnable() {
  this.node.on(Node.EventType.TOUCH_END, this._touchEndEvent, this);
}

onDisable() {
  this.node.off(Node.EventType.TOUCH_END, this._touchEndEvent, this);
}

private _touchEndEvent() {
  console.log("------ node touchEndEvent");
}

注意：

• 事件的注册最好在onEnable中，删除在onDisable中。
• 如果删除放在onDestory中可能会出现一些程序报错问题。

通过on和off进行注册或删除事件相关即可。在有些情况下，事件的注册会类似这种：

private createItems() {
	for (let i = 0; i < 5; i++) {
		let node = instantiate(this.nodePrefab);
		if (node) {
			node.parent = this.parentNode;
			node.on(Node.EventType.TOUCH_END, () => {
				this.clcickNodeEvent(i);
			}, this);
		}
	}
}

// 如果在释放的时候可以这样：只输入回调事件的类型，放弃回调事件
onDisable() {
	let children = this.parentNode.children;
	for (let i = 0; i < children.length; i++) {
		chidlren[i].off(Node.EventType.TOUCH_END);
	}
}

注： 建议最好调用 off 进行释放，避免意外触发、内存占用及性能损耗的问题存在。

UI组件事件

---

UI组件的种类有很多，但支持事件的有：

• Button组件 按钮相关

• EditBox组件 文本输入框相关

• ScrollView组件 滚动容器相关

• Toggle组件 CheckBox相关

• ToggleContainer组件 对多个Toggle管理，实现单选

• Slider组件 滑动器组件

• PageView组件 页面视图容器

• WebView组件 显示网页相关

• VideoPlayer组件 视频播放组件相关

它们的组件事件结构大致是类似的:

属性	功能说明
Target	带有脚本组件的节点。
Component	脚本组件名称。
Handler	指定一个回调函数，当用户点击 UI组件 并释放时会触发此函数。
CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

添加事件的方式主要有三种：

• 组件脚本中构造 EventHandler 对象，然后设置对应的target、component、handler 和 customEventData 参数

// 以Button为例
import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("example")
export class example extends Component {
  onLoad () {
    const clickEventHandler = new EventHandler();
    clickEventHandler.target = this.node; 
    clickEventHandler.component = 'example';
    clickEventHandler.handler = 'callback';
    clickEventHandler.customEventData = 'foobar';

    const button = this.node.getComponent(Button);
    button.clickEvents.push(clickEventHandler);
  }

  // event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
  callback (event: Event, customEventData: string) {
    const node = event.target as Node;
    const button = node.getComponent(Button);
    console.log(customEventData); // foobar
  }
}

• 通过编译器来调用组件脚本中对应的事件，脚本中的事件接口要设置为public

UI组件	编译器中的事件名
Button	ClickEvents
EditBox	EditingDidBegan, TextChanged, EditingDidEnded, EditingReturn
ScrollView	ScrollEvents
Toggle	CheckEvents, ClickEvents
ToggleContainer	CheckEvents
Slider	SliderEvents
PageView	PageEvents
webView	WebviewEvents
VideoPlayer	VideoPlayerEvent

以按钮为例：

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
 
@ccclass('UI_DemoLayer')
export class UI_DemoLayer extends Component {
  public ClickCloseEvent(customData: string) {
    this.node.destroy();
  }
}

• 通过获取组件的节点然后调用on来实现，该使用方式跟Node的触摸事件类似，不同的UI组件有对应不同的类型, 以按钮为例:

import { _decorator, Component, Button, Node } from 'cc';
const { ccclass, property } = _decorator;
 
@ccclass('UI_DemoLayer')
export class UI_DemoLayer extends Component {
  // 在编译器中声明属性
  @property(Button)
  btn: Button = null;
  
  // 以Button为例
  onEnable() {
    this.btn.node.on(Button.EventType.CLICK, this._clickCLoseEvent, this);
  }

  onDisable() {
    this.btn.node.off(Button.EventType.CLICK, this._clickCLoseEvent, this);
  }
  
  private _clickCLoseEvent(customData: string) {
    this.node.destroy();
  }
}

注： 不同的UI组件的事件类型不同，尽量不要混合使用。比如来说， 节点的触摸事件使用Button.EventType.CLICK 。