关于节点监听点击事件的性能疑问

Creator 3.x
#1

因为我是做微信小游戏的，这里只讨论 web-mobile 的场景哈。

假设一个地图场景上有50个角色在走动，要求每个角色都是能被点击的（点击了就弹出该角色的详情弹窗）。

常规的点击处理，是给每个角色节点绑定点击监听：

playerNode_1.on(Node.EventType.TOUCH_END, xxx);
// ...
playerNode_50.on(Node.EventType.TOUCH_END, xxx);

另一种方案是给最顶层的地图节点绑定点击监听，然后自行通过计算来得出当前的点击是否点中了其中某个角色：

mapNode.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
    // 计算点击位置，从而得知是否点中了其中某个角色，是的话则弹窗
});

想问下最后面的这种方案，性能上会有提升么？毕竟它减少了 49 个 .on() 的点击事件监听绑定。

#2

不懂就问 那每个角色的位置更新是都要记录下来的咯 然后根据触摸地图坐标和角色位置映射来判断吗

#3

可以地图节点被点击的那一刻，获取所有角色节点的坐标，然后再逐个计算做判断。

#4

哪有你这么做的，在charater 里面加入一个isselect 里面根据坐标判断点击的是不是自己，如果是则显示自己信息

#5

第一种是引擎内会进行遍历计算，第二种是自己遍历计算，你纠结这点性能干啥？

#6

你想多了，监听是屏幕位置发送射线击中目标，也就是说不点击的时候，所有监听都是静态资源只占内存，可以理解为休眠状态。你点击某个地方，只在下1帧发送对应位置的射线，如果射线命中目标，在下下1帧才触发监听事件逻辑。所以你的性能纠结点是无中生有

#7

所以你的监听写法，是怎么方便逻辑就怎么用

#8

你的第二种，还要再进行if比对坐标，更多此一举

#9

感谢，我的纠结是因为我以前是做H5的，H5的 DOM 点击监听（addEventListener）绑定的太多会有性能问题（即在 H5 下，第二种事件委托的方案性能会好一些），看来 Cocos web-mobile（就单个 Canvas DOM）不会有这种问题。

#10

cocos会有比H5更加高明的实现方法吗？答案是并没有，原理是一样的，像你这种几十个item的肯定是第二种。添加事件都是加到对应的事件节点树里的，点击屏幕或者一直触摸是会遍历的事件节点树的，树的子节点多性能肯定受影响（要跳出这个节点的干扰，只点击待优化节点看似没啥影响，但点击别的节点时就会发现方法一二会有很大的差距）