1

我正在使用 Phonegap 和 jQuery Mobile 开发一个应用程序。我有一个嵌套在可滚动侧边栏上的可滚动复选框列表。两者都是使用 iScroll 实现的。

该应用程序在 iOS 和 Blackberry 上响应完美，但一些 Android 设备有一个奇怪的行为。

在 Nexus 4 上，复选框在被点击时会得到一个双重更改事件，几乎立即有效地被选中和取消选中。

为内部 iScroll 生成的 HTML 如下：

    <div id="fondoOpciones0" class="fondoOpciones" style="height: 138px;">
   <div id="contenedorOpciones0" class="contenedorOpciones" style="height: 128px; overflow: hidden;">
      <div id="contenedorInternoOpciones0" class="contenedorInternoOpciones" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px);">
         <div name="filtroOpcion0" category="">
            <div class="ui-checkbox"><label for="00" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Option 1</span><span class="ui-icon ui-icon-checkbox-on ui-icon-shadow">&nbsp;</span></span></label><input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="00" value="-1" checked=""></div>
         </div>
         <div name="filtroOpcion0" category="">
            <div class="ui-checkbox"><label for="01" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text"> Option 2</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label><input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="01" value="10036"></div>
         </div>
         <div name="filtroOpcion0" category="">
            <div class="ui-checkbox"><label for="02" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Option 3 </span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label><input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="02" value="10037"></div>
         </div>
      <div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; -webkit-transition: opacity 0ms 0ms; transition: opacity 0ms 0ms; overflow: hidden; opacity: 1;">
         <div style="position: absolute; z-index: 100; background-color: rgba(0, 0, 0, 0.498039); border: 1px solid rgba(255, 255, 255, 0.901961); -webkit-background-clip: padding-box; box-sizing: border-box; width: 100%; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; pointer-events: none; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform: translate(0px, 0px) translateZ(0px); height: 11px;"></div>
      </div>
   </div>
</div>

然后我使用以下方法为这些复选框实例化 iScroll：

new iScroll('contenedorOpciones0', {
                vScrollBar: true, 
                bounce:false, 

                onBeforeScrollStart :function(e){
                    //Prevent the parent iScroll from scrolling when scrolling this iScroll
                    e.stopPropagation();
                    var target = e.target;
                    while (target.nodeType != 1) target = target.parentNode;
                    if (target.tagName != 'select' && target.tagName != 'input' && target.tagName != 'label' && target.tagName != 'span')
                    {
                        e.preventDefault();
                    }
                    return false;
                }
            })

奇怪的是，当我删除 onBeforeScrollStart 的内容时，问题消失了，复选框被选中并且之后没有取消选中，但是由于 iScroll 嵌套在侧边栏上（也有一个 iScroll），这导致两个 iScrolls 同时滚动。

仅添加 e.stopPropagation() 行，滚动行为得到纠正，但出现复选框双重检查问题。

我注意到另一个奇怪的行为：当不使用 jQuery Mobile 的 trigger("create") 时，我将更改事件绑定到复选框，如下所示：

$('body').on("change",'input:checkbox[name^="inputfiltroOpcion0"]',function(e){
          console.log("Changed!");
 }

更改事件被触发两次。使用 trigger("create") 只会触发一次。这仅在此 Android 手机中发生，在其他 Android 设备、iOS 和 Blackberry 中，在这两种情况下它只会触发一次。

我不知道是否有人遇到过类似的行为，也不知道 Nexus WebView 是否存在任何问题。

4

0 回答 0