屏蔽触摸事件

在开发中，有时需要A Layer响应触摸，而B Layer不响应触摸，如果A Layer添加触摸事件监听，而B Layer不添加那么可以实现这个需求。但是如果A、B都需要响应触摸，但在某些时候只要求A响应B不响应，那么可以在A、B之间添加一个屏蔽了触摸事件的C Layer，这个Layer和A、B有同一个父节点，ZOrder在A之下B之上，那么A监听到了触摸之后，C屏蔽了触摸，B就监听不到触摸了。

使用Cocos（V2.3.2）新建了一个Cocos项目，然后使用Cocos Code IDE（Build:V1.2.0）导入，在src/app/views/目录下新建了一个Lua文件，代码如下：

local Pingbilayer = class("Pingbilayer",function()
    return cc.LayerColor:create()
end)

function Pingbilayer:ctor(data,isTouming)
    if data then 
        self.Rect = data.Rect
    end 
    local sz = cc.c4f(0,0,0,146)
    if isTouming then
        sz = cc.c4f(0,0,0,0)
    end
    local _layer = cc.LayerColor:create(sz)
    self:addChild(_layer,-1)   
    self:Pingbitouch()
end

function Pingbilayer:Pingbitouch() 
    local function onTouchBegan(touch, event)
        print("--touch began--")
        return true 
    end

    local function onTouchEnded(touch, event)
        print("--touch ended--")
        local point = touch:getLocation()
        if self.Rect then
            if cc.rectContainsPoint(self.Rect,point) == false then
                self:removeFromParent() 
            end 
        end
    end 

    local listener = cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN)
    listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED)
    listener:setSwallowTouches(true)

    self:getEventDispatcher():addEventListenerWithSceneGraphPriority(listener,self)
    local function onNodeEvent(event)
        if event == "exit" then
           self:getEventDispatcher():removeEventListener(listener)
        end
    end
    self:registerScriptHandler(onNodeEvent)
end

return Pingbilayer

在创建这个屏幕层时传入了一个data参数，data中的Rect字段是一个矩形，如果在触摸结束时，触摸点在矩形外则将这个屏蔽层从父节点移除。在移除前将触摸监听移除。

在MainScene.lua中开启触摸

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

--MainScene.RESOURCE_FILENAME = "MainScene.csb"
--
--function MainScene:onCreate()
-- printf("resource node = %s", tostring(self:getResourceNode()))
--end

function MainScene:ctor()
    self:enableNodeEvents()
end

function MainScene:onEnter()
    local _size = cc.Director:getInstance():getWinSize()
    local sp=cc.Sprite:create('res/HelloWorld.png')
    self:addChild(sp)
    sp:setPosition(_size.width/2,_size.height/2)
    self:openTouch()
end

function MainScene:openTouch()
    local listener = cc.EventListenerTouchOneByOne:create()

    local function onTouchBegan( touch,event )
        print("--touchBegan--")
        return true  
    end

    local function onTouchMoved( touch,event )
        print("--touchMoved--")
    end

    local function onTouchEnded( touch,event )
        print("--touchEnded--")
    end

    listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN)
    listener:registerScriptHandler(onTouchMoved,cc.Handler.EVENT_TOUCH_MOVED)
    listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED)

    self:getEventDispatcher():addEventListenerWithSceneGraphPriority(listener,self)

    local function onNodeEvent(event)
        if event == 'exit' then
            self:getEventDispatcher():removeEventListener(listener)
        end     
    end
    self:registerScriptHandler(onNodeEvent)
end

return MainScene

运行之后

在onEnter里添加一个方法createUI

function MainScene:onEnter()
    local _size = cc.Director:getInstance():getWinSize()
    local sp=cc.Sprite:create('res/HelloWorld.png')
    self:addChild(sp)
    sp:setPosition(_size.width/2,_size.height/2)
    self:createUI()
    self:openTouch()
end

function MainScene:createUI()
    local pb = require("app/views/Pingbilayer").new()
    self:addChild(pb)
end

createUI将屏蔽层添加上之后
可以看到屏蔽层响应了触摸并且屏蔽了触摸，MainScene没有响应触摸。

但是把屏蔽层的ZOrder改变之后，self:addChild(pb,-1)
不仅MainScene可以响应触摸，屏蔽层也可以，而且MainScene响应在前。

在createUI方法中添加一个九宫格精灵，并在创建屏蔽层时传入Rect

function MainScene:createUI() local _size = cc.Director:getInstance():getWinSize() local frame = ccui.Scale9Sprite:create('res/frame.png') local size = frame:getContentSize() frame:setCapInsets(cc.rect(31,31,size.width-62,size.height-62)) frame:setContentSize(200,200) self:addChild(frame) frame:setPosition(_size.width/2,_size.height/2) local rect = frame:getBoundingBox() local pb = require("app/views/Pingbilayer").new({Rect = rect}) self:addChild(pb) end

运行后
点击黄框之外的地方，屏蔽层会从父节点上移除