Question

我正在使用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的触发器（“创建”）时，我将更改事件绑定到这样的复选框：

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

更改事件被触发两次。使用触发器（“创建”）只需触发一次。这只发生在这款Android手机，其他Android设备，iOS和Blackberry两种情况下，只会被触发一次。

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

jquerymobile - 在某些Android设备上自动取消选中复选框

0 个答案: