CocosCreator3D插件教程(8)：给面板上的按钮绑定点击事件

xu_yanfeng

已于 2024-09-08 11:13:30 修改

阅读量1.1k

点赞数

分类专栏： CocosCreator3D插件教程文章标签： cocos-creator plugin

于 2020-11-14 15:17:08 首次发布

本文链接：https://blog.youkuaiyun.com/xx774177933xx/article/details/109691351

版权

CocosCreator3D插件教程专栏收录该内容

23 篇文章

订阅专栏

本教程介绍了如何在CocosCreator3D插件中给面板按钮绑定点击事件。首先，通过特定方法获取按钮元素，接着使用HTML原生API为按钮添加点击事件监听器。完成绑定后，测试点击按钮会在编辑器控制台打印日志，方便开发自定义插件工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上节教程中，我们给插件面板添加了按钮，并且可以对按钮外观样式进行个性化设置。

那么我们该如何给按钮添加一个点击事件呢？

1.获取按钮元素

panel.js

exports.template = `
<button class="btn">
    按钮
</button>`;

exports.style = `
.btn{
    width:100px;
    height:100px;
}`;

exports.$ = {
    btn: '.btn', // 获取按钮元素 
}

通过$，我们可以很方便的拾取界面上的HTML元素，web老司机一看就明白怎么回事了，这里我简单解释下，更多技术细节，参考web前端技术相关教程：

.可以拾取class元素

exprots.$ = { btn: '.btn'}

<button class="btn">按钮</button>

#可以拾取id元素

exprots.$ = { btn: '#btn'}

<button id="btn">按钮</button>

2.给按钮绑定事件

panel.js

// ...
exports.ready = function () {
    this.$.btn.addEventListener('click', () => {
        console.log('点击按钮')
    })
}

这里必须在ready中获取HTML元素，直接使用html原生api，对按钮元素添加点击事件。

3. 点击按钮测试下

我们重新加载插件面板，刷新后，我们点击按钮，编辑器的控制台就会打印log

至此，我们就可以在插件面板中自由编写逻辑，写一些小插件工具。

有木有很激动？赶快试试吧！