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"> </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"> </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"> </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 もある) にネストされているため、両方の iScroll が同時にスクロールします。
e.stopPropagation() 行のみを追加すると、スクロール動作は修正されますが、チェックボックスのダブル チェックの問題が発生します。
私が気付いた別の奇妙な動作: jQuery Mobile の trigger("create") を使用せず、変更イベントを次のようにチェックボックスにバインドする場合:
$('body').on("change",'input:checkbox[name^="inputfiltroOpcion0"]',function(e){
console.log("Changed!");
}
change イベントは 2 回発生します。trigger("create") を使用すると、一度だけ起動されます。これは、この Android フォンでのみ発生し、他の Android デバイスでは、iOS と Blackberry の両方の状況で一度だけ発生します。
誰かが同様の動作に直面したかどうか、または Nexus WebView に問題があるかどうかはわかりません。