Android浮层点击穿透问题

  最近做微信公众号开发的时候遇到一个问题,上线后发现此问题后检查代码没有发现问题,无奈只能回滚到上一个版本。

  问题是这样的:页面一个选择的浮层,在浮层点击确定后,下面的页面会自动提交

  

  在测试环境上无法重现,也不可能用正式环境测试问题,百撕不得骑姐之际,突然想到这个现象十分像JS冒泡,当然不是JS冒泡,那会不会是点了这个确定触发了下面的提交,测试环境没问题是因为测试环境由于数据原因,提交按钮刚好没在确定下面。

  这个容易,造数据验证,果然猜对了。剩下的就好办了,在浮层还在的时候锁掉下面的提交就好了。

  这个浮层是由mobiscroll.scroller控件产生的,去翻文档,发现特别慢,懒得翻墙就看了下控件的源码。

  找到了浮层打开前的事件:onBeforeShow;又找到了选择事件,同时因为需要显示的值和控件原本的不同,就直接改代码了:

  

/**
        * Set button handler.
        */
        that.select = function () {
            if (that.hide(false, 'set') !== false) {
                setValue(true, true, 0, true);
                var showText = that.getValue();
                if(showText.length>12){
                    var text = showText.slice(0,11);
                    showText = text + "...";
                }
                /*event('onSelect', [that.val]);改为显示值*/
                event('onSelect', [showText]);
                /*加个事件*/
                event('onEndSelect', [showText]);
            }
        };

        /**
        * Cancel and hide the scroller instance.
        */
        that.cancel = function () {
            if (that.hide(false, 'cancel') !== false) {
                event('onCancel', [that.val]);
                event('onEndSelect', [that.val]);
            }
        };

  掉用处的代码:

        var opt = {
            'select-opt': {
                preset: 'select',
                group: true,
                 50
                ,onBeforeShow:function(){
                    lockSure = true;
                }
                ,onClose:function(){
                    setTimeout('lockSure = false;',400);
                }
                ,onEndSelect:function(){
                    setTimeout('lockSure = false;',330);
                }
            }
        };

  上面onClose是同事连VPN后在文档中找到的事件,不过发现直接在事件中设置锁定变量值是不行的,只好延迟一下执行。经过测试,在手机反应比较慢时onClose在400毫秒时或选择结束时延迟330毫秒基本可以保证执行正常,选择结束效果产生会快一点,onClose的效果会比我加的事件处理全面一些,所以两个都保留了。

原文地址:https://www.cnblogs.com/saaav/p/4224220.html