3.cc.Node(二)事件响应

最新推荐文章于 2023-09-30 00:02:41 发布
最新推荐文章于 2023-09-30 00:02:41 发布
阅读量436 收藏
点赞数
分类专栏： cocos creator 文章标签： cocos creator教程 事件响应 自定义事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaz540411484/article/details/88978591
版权

1.触摸事件

触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外); 

监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]);

关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]);

targetOff (target): 移除所有的注册事件;

回掉函数的参数设置  function(t(cc.Touch));

cc.Touch: getLocation返回触摸的位置;getDelta返回距离上次的偏移;

cc.Event: stopPropagationImmediate/stopPropagation 停止事件的传递;

事件冒泡: 触摸事件支持节点树的事件冒泡,会从当前往上一层一层的向父节点传送;

touch_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    //t --> cc.touch
    //可以获取屏幕触摸的位置的坐标 左下角(0, 0)
    on_touch_move : function(t) {
        console.log("cc.Node.EventType.TOUCH_MOVE");
        //console.log(t.getLocation());
        var w_pos = t.getLocation();
        console.log(w_pos, w_pos.x, w_pos.y)

        //距离上一次触摸变化了多少
        var delta = t.getDelta(); //x, y各变化了多少 cc.Vec2(x, y)
        this.node.x = this.node.x + delta.x;
        this.node.y = this.node.y + delta.y;

    },

    onLoad () {

        //(1) 监听对应的触摸事件; 向引擎底层注册一个回调函数,当有触摸事件发生的时候调用这个回调函数
        //cc.Node.EventType.TOUCH_START 触摸开始
        //cc.Node.EventType.TOUCH_MOVE  触摸移动
        //cc.Node.EventType.TOUCH_END   触摸结束,在物体内部
        //cc.Node.EventType.TOUCH_CANCEL  触摸结束,在物体外部
        //this.node.on(type, callback, target, useCapture)  其中target为:你要绑定哪个对象作为你回调函数的this
        this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
            console.log("cc.Node.EventType.TOUCH_START");
            t.stopPropagationImmediate(); //停止事件冒泡传递
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
        //this.node.off(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);//移除监听事件

        this.node.on(cc.Node.EventType.TOUCH_END, function(t) {
            console.log("cc.Node.EventType.TOUCH_END");
        }, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(t) {
            console.log("cc.Node.EventType.TOUCH_CANCEL");
        }, this); 

        //移除target上所有的注册时间
        //this.node.targetOff(this);

    },

    start () {

    },

    // update (dt) {},
});

2.键盘事件

 kb_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    on_key_down : function(event) {

        switch (event.keyCode) {
            case cc.KEY.space:
                console.log("space is down");
                break;
            default:
                break;
        }

    },

    on_key_up : function(event) {

        switch (event.keyCode) {
            case cc.KEY.space:
                console.log("space is up");
                break;
            default:
                break;
        }

    },


    onLoad () {

        //(1)向引擎注册事件类型的回调函数
        //(2)按键事件的类型 cc.SystemEvent.EventType.KEY_DOWN, cc.SystemEvent.EventType.KEY_UP
        //(3)配置回调函数
        //(4)每一个按键都会对应一个按键码 event.keycode
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down, this); //按键按下
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up, this); //按键弹起

    },

    start () {

    },

    // update (dt) {},
});

3.自定义事件

监听: this.node.on(“自定义事件名称”, function, target, useCapture);

自派送: emit(“事件名称”, [detail]); 只有自己能够收到;

冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡传递));

custom_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        //自定义事件

        //接受者
        //事件类型, 你自定义的字符串
        //回调函数: function(e) {}  e --> cc.Event.EventCustom的实例
        // this.node.on("pkg_event" , function(e) {
        //     console.log("pkg_event is call", e);
        // }, this);

    },

    start () {

        //发送者 只能传递给自己 不能冒泡 可以传递参数
        //this.node.emit("pkg_event", {name: "lyc"}, null);

        //发送者  不止发送给自己 发给这个体系
        var e = new cc.Event.EventCustom("pkg_event", true); // true 向上传递  false 不向上传递
        e.detail = {name: "xiaoming"};
        this.node.dispatchEvent(e); //分发事件到事件流中

    },

    // update (dt) {},
});

recv_canvas_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.node.on("pkg_event" , function(e) {
            console.log("recv_pkg_event is call", e.detail.name);
        }, this);

    },

    start () {

    },

    // update (dt) {},
});

工程截图:

 

 

 

 

Pink0453
关注
专栏目录
cc.Node事件响应
m0_46113894的博客
11-09 1424
cc.Node事件响应触摸事件键盘事件自定义事件 触摸事件 触摸事件类型: START,MOVED, ENDED(物体内), CANCEL（物体外）: 监听触摸事件: node.on(类型, callback, target(回掉函数的this),[useCapture]); this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction, this); // if “this” is component and the “member
cocos creator入门教程（四）—— cc.Node事件响应(触摸事件、键盘事件、自定义事件)
标题
08-24 5127
触摸事件 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外); 监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]); 关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]); targetOff (targ...
CocosCreator TOUCH_MOVE事件
Dust的博客
12-09 4868
注册事件 在onDestroy里注销本事件 onLoad() { this.node.on(cc.Node.EventType.TOUCH_MOVE, this._touchMove, this); } protected onDestroy(): void { this.node.off(cc.Node.EventType.TOUCH_MOVE, this._touchMove, this); } 绑定的事件，里面可以获取到的一些参数 private _touchMove(e) { co.
cocos creator触摸事件 cc.node.EventType
热门推荐
W_han__的博客
02-25 1万+
var sprite = myholds.children[i].getComponent(cc.Sprite); var _x = 0; var _y = 0; sprite.node.on(cc.Node.EventType.TOUCH_START, function(e){ console
cocos creator基础-cc.Node(二)事件响应
Gaos的BLOG
05-07 920
触摸事件 1: 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外); 2: 监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]); 3: 关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]); 4: target...
Cocos Creator 触摸点击事件
weixin_34223655的博客
01-31 1541
触摸事件// 使用枚举类型来注册枚举对象定义 对应的事件名 事件触发的时机cc.Node.EventType.TOUCH_START 'touchstart' 当手指触点落在目标节点区域内时cc.Node.EventType.TOUCH_MOVE 'touchmove' 当手指在屏幕上目标节点区域内移动时cc.Node.EventType.TOUCH_END 'touchend' 当手指在目标节点...
cocoscreator 第三章 ccnode之事件响应 （ccnode四大模块 1、场景树 2、事件响应 3、坐标空间转换 4、action的使用）
qq_18643343的博客
01-19 331
触摸事件 1: 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外); 2: 监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]); 3: 关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]); 4: tar...
w3cSchool.cc资源（http://www.w3cschool.cc）
04-27
2. CSS教程：CSS（Cascading Style Sheets）用于控制网页的样式和布局，w3cSchool.cc的CSS教程涵盖了选择器、盒模型、定位、浮动、响应式设计等关键概念，助力开发者打造美观的网页。 3. JavaScript教程：...
cocos CC.Node详解
qq_15336277的博客
06-04 1266
/** !#en Group index of node.<br/> Which Group this node belongs to will resolve that this node's collision components can collide with which other collision componentns.<br/> !#zh 节点的分组索引。<br/> 节点的分组将关系到节点的碰撞组件可以与哪些碰撞组件相碰撞。&...
cocos creator入门教程（三）—— cc.Node属性
标题
08-22 4578
creator是由一个一个的游戏场景组成，通过代码逻辑来控制场景跳转; creator场景是一个树形结构; 父节点, 孩子节点; cc.Node就是场景树中的节点对象。 每个节点只要在场景里面，所以任何一个节点都是一个cc.Node; 下面我们通过代码和log打印输出来认识node的属性： 所有的组件都扩展自cc.Component(类, 构造函数); 每个cc.Comp...
cocos creator Node.EventType.TOUCH_START点击没反应
最新发布
coloma2012的博客
09-30 546
Node.EventType.TOUCH_START 对子node没有反应，该事件处于父node事件作用范围之内，使用父级绑定的事件。如果子node的UITransform处于父级node的UITransform图像覆盖范围之内，则。
cc.Node.事件
weixin_34260991的博客
11-15 291
触摸事件 1.触摸事件的类型:START触摸启动,MOVED移动,ENDED弹起来,CANCEL取消; ENDED和CANCEL区别是ENDED物体内弹起来,CANCEL是在物体外范围弹起。 2.监听触摸事件,node.on(类型,callback,target(回调函数的this),[useCapture]) 3.触摸事件,node.on(类型,...
cocos creator四种事件
yiyezhichen的博客
01-18 6173
1、cocos creator接受的系统事件有四种 鼠标、触摸、键盘、重力传感四种。 其中鼠标事件和触摸事件，这些时间是被直接触发在相关节点上的，所以统称为节点系统时间。 与之对应的键盘和重力事件被称为全局系统事件。 鼠标事件类型 cc.Node.EventType.MOUSE_DOWN:当鼠标在目标节点区域按下时触发一次
CocosCreator-系统事件是怎么产生及触发的？
weixin_47879201的博客
03-11 1012
写在前面 开个头 依旧是面试官系列。 面试官：怎么实现节点的点击事件监听？ 我：用this.node.on()实现 面试官：那他是怎么产生的呢？ 我：… 本文以触摸事件（cc.Node.EventType.TOUCH_START）作为主线，简单分析一下Cocos引擎中的事件是如何从浏览器传递到Node的事件中的。 你可能还想要问，那事件是怎么从浏览器产生的呢？我：… 一些话 我是个即将毕业的应届生，受水平所限，难免有些地方写的不是很好，但不动手的话，也不会进步，就指望大家多多包涵啦，有错误的地方也劳烦大家伙
cocos creator学习笔记2——事件响应
章鱼仔的博客
02-27 3695
cc.Node事件响应 触摸事件 基本事件类型 相应事件 TOUCH_START 触摸开始事件 TOUCH_MOVE 在屏幕上目标节点区域内移动时 TOUCH_END 在目标节点区域内离开屏幕时 TOUCH_CANCEL 在目标节点区域外离开屏幕时 cocos中所有事件都能够使用监听函数监听这类事件 使用Node.on(EventT
移动端h5页面touch事件与点击穿透问题
weixin_30746117的博客
04-29 1669
前言 做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。 touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和clic...
cocos creator 多选节点，高亮显示
jia_ly的博客
02-22 3058
转自：https://www.cnblogs.com/hdwang/p/7498858.html 可用于斗地主选牌 代码块 cc.Class({ extends: cc.Component, properties: { poker:{ default:null, type:cc.Node ...
cocos creator 触摸事件 + 移动Node
t59651090t的博客
01-04 2697
start(){ this.touchNode.on(cc.Node.EventType.TOUCH_START,this.TOUCH_START,this); this.touchNode.on(cc.Node.EventType.TOUCH_MOVE,this.TOUCH_MOVE,this); this.touchNode.on(cc.Node.EventType.TOUCH_END,this.TOUCH_END,this) ...
CocosCreator教程（入门篇）【转】
Globalizationa的博客
01-27 2420
目录一、项目结构二、资源分类1、场景（scene）2、贴图（texture）3、预制（prefab）4、图集（atlas）5、自动图集（auto-atlas）6、艺术数字（label-atlas）7、字体（font）8、粒子（particle）9、声音（audio）10、骨骼动画（spine / dragonBones）11、瓦片图（tiledMap）12、文本（text）13、脚本（script）14、json三、资源小知识点1、跨项目导入导出资源2、图像资源自动剪裁四、场景小知识点1、场景中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值