sencha touch中点击overlay,会触发底下的输入框获得焦点的处理办法

来源:互联网 发布:java定义可变长度数组 编辑:程序博客网 时间:2024/06/05 11:25

sencha touch中,弹出一个overlay,或者一个Ext.Msg,如果这个overlay下面正好是一个输入框或者按钮,当点击overlay中按钮时,会发生穿透,使下面的按钮或输入框触发事件。

大概是这样一种现象:


这是一组图片,点击图片,弹出一个overlay层,


这是点击之后,放大的情况。此时我们点击close按钮,会关闭overlay层。但是,很不巧的是,如果你点击的是图中圆圈区域,那么这个点击会发生穿透,使下面的小图片也触发点击事件,即还会再次弹出被穿透的那个图片。

解决办法1:

所有的container和component都一个disabled方法,可以监控,当overlay弹出时,使下边的层disable,当overlay消失时,取消disable。

解决办法2:

给下面的层组件添加一个css属性:pointer-events:none,来组织它的焦点事件。

当弹出overlay时,就给下面的组件添加一个css属性,当overlay消失时,取消这个属性。大概代码为:

Ext.Viewport.on({  delegate: 'mask',  show: function(mask) {    var activeItem = Ext.Viewport.getActiveItem();    if (activeItem.element)      activeItem.element.addCls('prevent-pointer-events');  },  hide: function(mask) {    var activeItem = Ext.Viewport.getActiveItem();    setTimeout(function() {      if (activeItem.element)        activeItem.element.removeCls('prevent-pointer-events');    }, 400);  }});


0 0
原创粉丝点击