鼠标悬浮事件

Creator 2.x
#1

版本1.8.1
请教个问题
b是a的子节点,b开始是隐藏的。
当a触发mousemove后，b显示，a背景变红。
当a触发mouseleave后，b隐藏，a背景还原。

但是当b触发mousemove时，a就默认mouseleave了。
不知道该怎么解决。

我需要实现的是，不管b和a哪个mousemove，a背景都要变红，b显示。
请大家帮忙看下。

#2

你可以通过记录两个node的鼠标悬停状态，然后统一处理显示效果。

test.gif586×536 559 KB

const { ccclass, property } = cc._decorator;

@ccclass
export default class Test extends cc.Component {
	
	@property(cc.Node)
	nodeA: cc.Node = null;

	@property(cc.Node)
	nodeB: cc.Node = null;

	// 记录颜色
	activeColor: cc.Color = new cc.Color(255, 0, 0, 255);
	inactiveColor: cc.Color = new cc.Color(0, 0, 255, 255);

	// 记录两个node的悬浮状态
	hoveringA: boolean = false;
	hoveringB: boolean = false;

	start() {
		// 绑定事件
		this.nodeA.on(cc.Node.EventType.MOUSE_MOVE, this.onMoveA, this);
		this.nodeB.on(cc.Node.EventType.MOUSE_MOVE, this.onMoveB, this);
		this.nodeA.on(cc.Node.EventType.MOUSE_LEAVE, this.onLeaveA, this);
		this.nodeB.on(cc.Node.EventType.MOUSE_LEAVE, this.onLeaveB, this);
		this.nodeB.active = false;
	}

	onMoveA() {
		this.hoveringA = true;
		this.updateState();
	}

	onMoveB() {
		this.hoveringB = true;
		this.updateState();
	}

	onLeaveA() {
		this.hoveringA = false;
		this.updateState();
	}

	onLeaveB() {
		this.hoveringB = false;
		this.updateState();
	}

	// 统一处理鼠标移入、移出事件
	updateState() {
		if (this.hoveringA || this.hoveringB) {		// 鼠标悬浮任意元素
			if (this.nodeA.color !== this.activeColor) {
				this.nodeA.color = this.activeColor;
			}
			if (!this.nodeB.active) {
				this.nodeB.active = true;
			}
		} else {					// 鼠标移出所有元素
			if (this.nodeA.color !== this.inactiveColor) {	
				this.nodeA.color = this.inactiveColor;
			}
			if (this.nodeB.active) {
				this.nodeB.active = false;
			}
		}
	}
}
2赞