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

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);
  }
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值