关于prefab动态添加点击事件

Creator 2.x
#1

我在【背包】中，动态生成道具，需要点击【获取】或【装备】需要拿到该道具的id。

我按教程给按钮动态添加点击事件，但点击预览没有任何响应，【页面没有输出】，请问是哪里出问题了吗？

下边是代码，请大神指教

    var clickEventHandler = new cc.Component.EventHandler();
    clickEventHandler.target = this.btn;
    clickEventHandler.component = "03_yuErItem_prefab"; // 文件名
    clickEventHandler.handler = "btnClick2";
    clickEventHandler.customEventData = itemInfo.baitId; //
    this.btn.getComponent(cc.Button).clickEvents[0]=clickEventHandler;

  btnClick2(event, customEventData) {
    console.log('这里是点击事件')
    console.log(event)
    //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
    var node = event.target;
    console.log(event)
    //这里的 customEventData 参数就等于你之前设置的 "click2 user data"
    cc.log("node=", node.name, " event=", event.type, " data=", customEventData);
  },

微信截图_20200416001905.png1511×768 73.3 KB

微信截图_20200416001950.png431×546 23.5 KB

#2

如果添加成功的话，点击按钮应该会在控制台输出： '这里是点击事件',node=node.name, event=touched data=1 之类的，但没有输出。好像没绑定按钮似的

#3

如果你要通过这种方式绑定的话，
使用 clickEventHandler.component = event.component; 设置组件名称还不够
你还需要设置组件ID，来确定这是要监听的组件。
不过这个是一个私有的属性，得使用 clickEventHandler['_componentId'] = 组件的ID; 来赋值。
(注意:新版本才有这个问题，教程可能使用的是旧版本的creator，所以才能生效)

当然，实际上写代码 不太推荐用这种方法来绑定点击事件（这是给编辑器Button用的）。
你直接使用 cc.node.on(cc.Node.EventType.TOUCH_XXXX,()=>{ //todo })，这种监听方式就可以任意添加点击事件了。

#5

非常感谢你的指导，我用cc.node.on(cc.Node.EventType.TOUCH_XXXX,()=>{ //todo })的方法实现了点击，但又出现了关于CocosCreator背包滚动和道具被点击的触发机制问题的问题，滑动列表的时候也触发了点击事件。

我用之前的方法clickEventHandler['_componentId'] = this.btn.getComponent(cc.Button).uuid; 来获取componentId，但点击的时候报错：getComponent: Type must be non-nil.不知什么原因。

代码如下：

/* prefab.js*/
//  init方法是 在scrollview.js中 item.getComponent('03_yuErItem_prefab').init(i, playerInfo);   实例prefab用的
init(rank, itemInfo) {
    var clickEventHandler = new cc.Component.EventHandler();
    clickEventHandler.target = this.btn; // 这个 node 节点是你的事件处理代码组件所属的节点
    clickEventHandler.component = "03_yuErItem_prefab";// 这个是代码文件名    prefab.js
    clickEventHandler.handler = "onBtnClick";
    clickEventHandler.customEventData = itemInfo.baitId;

    var clickBtn = this.btn.getComponent(cc.Button);
    clickEventHandler['_componentId'] = clickBtn.uuid;
    clickBtn.clickEvents[0]=clickEventHandler;
}

btnClick2(event, customEventData) {
    console.log('这里是点击事件')
    console.log(event)
    //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
    var node = event.target;
    console.log(event)
    //这里的 customEventData 参数就等于你之前设置的 "click2 user data"
    cc.log("node=", node.name, " event=", event.type, " data=", customEventData);
  },
#6

这个点击事件的写法看着有点晕，不太理解楼主的意图。
我一般用这个写法 node.on(“click”,()=>{
})

#7

你好，我是按button组件–通过脚本添加回调方法做的。node.on(“click”,()=>{})方法会遇到关于CocosCreator背包滚动和道具被点击的触发机制问题的问题

#8

能做个测试包吗 我写好再发给你

#10

您好，这是我写的测试包，辛苦看一下。万分感谢
NewProject.zip (835.3 KB)

#11

我写了个测试包，将页面和问题展示出来，辛苦大佬帮忙改正。

目的：点击滚动列表的按钮，console中打印出相应按钮ID来

NewProject.zip (835.3 KB)

@wsssheep，@小刀UP，@hs

#12

经大神指点，prefab动态加载的时候把ID存在 prefab._data 里面了

prefab._data = itemInfo.baitId;

然后使用button组件绑定点击事件，就是获取id的时候有点绕

  onClick(e, value) {
    var id = e.currentTarget._prefab.root._data;
    console.log(id);
  },
#13

我给你说个简单的吧
添加回调：
this.node.on(‘click’,this.on_Iclick,this)
this.node.id=itemInfo.baitId //id可以改为任何标识 也可以添加多个表示
使用：
on_click(event){ //event.node等同于你点击的节点
let id=event.node.id //event.node.id等同于itemInfo.baitId
}

#14

试用下我的方法 你会发现新大陆- -

#15

clickEventHandler.target = 这里填写你当前代码绑定所在的节点

祝你顺利

#16

clickEventHandler[’_componentId’] = clickBtn.uuid;
刚测试了一下，把这一句注释掉就可以了