CocosCreator 长按与双击脚本

实现了一个简单的控件长按与双击事件的脚本，使用方法与cc.Button类似，选择需要的事件类型，指定事件回调方法即可。
代码：

cc.Class({
    extends: cc.Component,
    properties:
    {
        isLongTouch : {
            default : false,
            tooltip : "是否打开长按",
        },
        longTouchTime : {
            default: 2000,
            tooltip : "长按响应时间(单位:（ms/毫秒）)",
            visible() {
                return this.isLongTouch;
            }
        },
        longTouchEvent : {
            default: null,
            tooltip : "长按的响应事件",
            type : cc.Component.EventHandler,
            visible() {
                return this.isLongTouch;
            },
        },
        isDoubleClick : {
            default : false,
            tooltip : "是否打开双击",
        },
        doubleClickTime : {
            default: 400,
            tooltip : "双击之间的间隔时间(单位（ms/毫秒）)",
            visible() {
                return this.isDoubleClick;
            }
        },
        doubleClickEvent : {
            default: null,
            tooltip : "双击的响应事件",
            type : cc.Component.EventHandler,
            visible() {
                return this.isDoubleClick;
            },
        },
    },
      /***
      **  下面的都是临时变量
      ***/
    //触摸状态
    isTouchState : false,
    //触摸时长
    touchTime : 0,
    //记录双击状态
    doubleClickState : false,
    //记录双击的间隔时间
    doubleOffTime : 0,


    // LIFE-CYCLE CALLBACKS:
    ctor()
    {
        //初始化事件
        this.longTouchEvent = new cc.Component.EventHandler();
        this.doubleClickEvent = new cc.Component.EventHandler();
    },

    onLoad () 
    {
        //触摸开始
        this.node.on(cc.Node.EventType.TOUCH_START,function(event){
            this.isTouchState = true;
            this.touchTime = 0;
        },this);

        this.node.on(cc.Node.EventType.TOUCH_END,function(event){
            this.isTouchState = false;
            //判断是不是长按
            if(this.isLongTouch)
            {
                if(this.touchTime >= this.longTouchTime)
                {
                    //派发长按事件
                    this.longTouchEvent.emit([this.longTouchEvent.customEventData]);
                    this.touchTime = 0;
                    return;
                }
            }

            //判断是不是双击
            if(this.isDoubleClick)
            {
                if(this.doubleClickState)
                {
                     //第二次点击判断间隔时间
                    if(this.doubleOffTime <= this.doubleClickTime)
                    {
                        //派发双击事件
                        this.doubleClickEvent.emit([this.doubleClickEvent.customEventData]);
                    }
                    this.doubleOffTime = 0;
                    this.doubleClickState = false;
                }
                else
                {
                    //第一次点击后，设置为双击状态，开始双击间隔时间计时
                    this.doubleClickState = true;
                    this.doubleOffTime = 0;
                }
            }

            this.touchTime = 0;
        },this);

    },

    start () {

    },

    update (dt)
    {
        //触摸计时
        if(this.isTouchState)
        {
            //防止这个数加的很大
            if(this.touchTime > this.longTouchTime)
            {
                this.touchTime = this.longTouchTime;
            }
            this.touchTime = this.touchTime + dt*1000;
 
        }
        //双击计时
        if(this.doubleClickState)
        {
            if(this.doubleOffTime > this.doubleClickTime)
            {
                this.doubleOffTime = this.doubleClickTime;
            }
            this.doubleOffTime = this.doubleOffTime + dt*1000;
        }
    },
});

使用：
（1）将脚本添加到需要的控件上：

 

添加脚本组件的初始状态.png

 

（2）添加事件脚本

LongTouchCallBack : function(data)
    {
        console.log("长按",data);
    },
    DoubleClickCallBack : function(data)
    {
        console.log("双击",data);
    }

(3)绑定事件

 

绑定长按与双击事件.png

测试结果：

 

测试结果.png