CocosCreator 事件阻挡和事件穿透

版本：2.4.3

事件阻挡

如下图，现在实现只让白色响应事件，不让红色响应事件。(注意层级关系，红色包含着白色)

给红色和白色添加点击事件

this.white.on(cc.Node.EventType.TOUCH_END, ()=>{console.log("white click")},this);
this.red.on(cc.Node.EventType.TOUCH_END, ()=>{console.log("red click")},this);

点击白色和红色重叠区域，默认情况下白色和红色都会响应点击事件

给在上方的白色挂上一个Block Input Events组件

事件会被阻挡，只有白色响应事件，红色不会响应点击事件

事件穿透

现在实现让红色和白色都能响应事件。 (注意red和white的层级关系，事件阻挡例子里是包含关系，这里是上下层关系)

点击白色和红色重叠区域，默认情况下只有上方的白色响应事件，红色不会响应点击事件。

编写一个穿透事件组件，并给上层的白色添加该组件。

const { ccclass, property } = cc._decorator;/*** 该组件将所属节点内的所有输入事件穿透到下层节点，一般用于上层 UI 的背景。* 该组件没有任何 API 接口，直接添加到场景即可生效。*/
@ccclass
export class ThroughInputEvents extends cc.Component {onLoad(): void {(this.node as any)._touchListener.setSwallowTouches(false);}
}

添加穿透事件组件后，再次点击重叠区域，则白色和红色都能响应事件

CocosCreator 事件阻挡和事件穿透相关推荐

解决echart单击事件、双击事件矛盾，echart双击事件会触发单击事件的问题。echart单击或者双击实现地图穿透，展示选中地图
最近项目实现可视化,首先加载中国或者某个省,或者某个市的地图,单击其中选中的地图,其他图表数据会重新请求并变化:双击选中的地图,当前echart地图会变成选中的地图(上面描述口水话,一句简单概括,双击 ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
android 事件冒泡,Android事件分发
当用户触摸屏幕时,系统会对触摸事件做出相应的相应,这个事件会产生一个MotionEvent,系统根据一定的规则将其传递给View进行处理,这个过程就是事件分发机制了. 事件的传递分为两个阶段,即捕获阶 ...
js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEv ...
知识图谱公开课 | 详解事件抽取与事件图谱构建
现有知识图谱大多关注于以实体为核心的静态知识,缺乏对于以事件为核心的动态知识的刻画和构建.如何从非结构化文本中抽取结构化的事件知识已成为眼下热门研究课题. 本次公开课中,我们邀请到了中科院自动化所模式 ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
java 绑定事件_Javascripts事件基础和事件绑定
javascript事件基础和事件绑定一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为 2.事件源引发事件的元素(发生在谁身上) 3.事件处理的程序对事件处理的程 ...
js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

CocosCreator 事件阻挡和事件穿透

CocosCreator 事件阻挡和事件穿透相关推荐

最新文章

热门文章