[英]Showing popUp after clicking on listView item
我創建了一個列表,當單擊一個項目時,將顯示一個彈出窗口。
當在移動設備(屏幕相對較小)上使用代碼時,問題開始。 當一個列表項被點擊時,彈出菜單中的一個按鈕也經常被點擊。
在用戶意識到甚至彈出窗口之前,停用按鈕的最佳方法是什么?
HTML代碼:
<div data-role="page" id="kon">
<div data-role="content">
<ul data-role="listview" id="kon_list" data-icon="false">
</ul>
<div data-role="popup" id="contactMsgBox" data-transition="pop">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Ansprechpartner kontaktieren</h3>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" style="width:95%">Anrufen</a> <br />
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" style="width:95%">E-Mail senden</a> <br />
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" style="width:95%">Abbrechen</a>
</div>
</div>
</div>
</div>
JS代碼:
kontakts = JSON.parse('[{"mail":"test@test.de",'+
'"name":"test test","ort":"Stuttgart","tel":"0123 1234-123"},{"mail":"test2@test.de",'+
'"name":"test2 test2","ort":"Lauf","tel":"0123 1234-123"}]');
var listHTML = "";
for(var i=0; i<kontakts.length; i++)
{
//set the menu item
listHTML = listHTML + "<li tel='"+kontakts[i].tel+
"' mail='"+kontakts[i].mail.toLowerCase()+"'><h3>" + kontakts[i].ort +
"</h3><p>" + kontakts[i].name + "<br />Telefon\t" + kontakts[i].tel +
"<br />E-Mail\t" + kontakts[i].mail.toLowerCase() + "</p></li>";
}
//set items and reload
$('#kon_list').html(listHTML);
$('#kon_list').listview('refresh');
//bind list items
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
//alert('Selected Tel=' + $(this).attr('tel') + 'Mail=' + $(this).attr('mail'));
$("#contactMsgBox").popup("open");
});
你可以改變
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
至
$('#kon_list').children('li').bind('vclick', function(e) {
這樣,直到用戶抬起手指或釋放鼠標按鈕,彈出窗口才會顯示。
之所以發生此問題,是因為從您單擊按鈕觸發點擊事件開始,移動瀏覽器等待大約300毫秒(在三星銀河s2上大約為500毫秒)。 此等待導致同時點擊,項目和彈出按鈕。
解決方案是停止瀏覽器等待。 這可以通過fastclick庫來完成
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.