ナビゲーション バー ボタン内から jQuery Mobile でポップアップを開きたいと思います。問題は、ボタンを押した後の小さなハイライト (デフォルトは青) です。デスクトップ ブラウザでは、ハイライトは 200 ミリ秒程度で削除されます。モバイル デバイスでは、ポップアップを開いた後にこのハイライトが表示されることがあり、ポップアップを閉じても削除されません。Nexus 4/10 でのファイル選択に関する問題。ファイル選択も追加しました。モバイル デバイスではハイライトが削除されることはありません。デスクトップ ブラウザーでは、これは大きな問題ではありません。
問題を説明するためにフィドルを作成しました。
HTML:
<div data-role="ui-page">
<div data-role="ui-header">
<div data-role="navbar">
<ul>
<li><a id="popupTest">Popup function</a></li>
<li><a href="#popup" data-rel="popup">Popup Link</a></li>
<li><a id="fileUpload">File select</a></li>
</ul>
</div>
</div>
<div data-role="ui-content">
<input type="file" id="fileSelect" data-role="none">
<div id="popup" data-role="popup">
<fieldset data-role="controlgroup" data-inset="true">
<input type="checkbox" name="option1" id="option1" value="true">
<label for="option1">Option #1</label>
<input type="checkbox" name="option2" id="option2" value="true">
<label for="option2">Option #2</label>
<input type="checkbox" name="option3" id="option3" value="true">
<label for="option3">Option #3</label>
</fieldset>
</div>
</div>
</div>
JS:
$('#popupTest').click(
function(event) {
$('#popup').popup(
'open', {
x: $(this).offset().left + $(this).width() / 2,
y: $(this).offset().top + $(this).height()
}
);
event.preventDefault();
return false;
}
);
$('#fileUpload').click(
function(event) {
$('#fileSelect').click();
event.preventDefault();
return false;
}
);
CSS:
#popup fieldset {
margin-top: 0;
margin-bottom: 0;
}
#fileSelect {
position: absolute;
top: -10000px;
left: -10000px;
}
公式のjQuery Mobileオプションで青いハイライトを防ぐ一般的な方法を探しています。スタイルシートを変更することもできますが、強調表示もコントロールの内部に保存されます。他の副作用があるかどうかはわかりません。
プログラムでポップアップを開くと、デスクトップ ブラウザにハイライトが表示されません。ナビゲーション バーがフッターで使用される場合、位置はより複雑な方法で計算する必要があります (フッターは固定されていますか?)。
それで、私が逃したオプションはありますか?navbar ボタンをクリックしたときにプログラムで何かを行う場合、event.preventDefault() を使用して false を返すのは正しいですか、それとも他に何か不足していますか?