1

我创建了一个列表，当单击一个项目时，会显示一个弹出窗口。

当在移动设备（屏幕相对较小）上使用代码时，问题就开始了。当一个列表项被点击时，很多时候，弹出窗口中的一个按钮也会被点击。

在用户意识到弹出窗口甚至显示之前停用按钮的最佳方法是什么？

试试这里的代码。

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");
});
4

2 回答 2

1

你可以改变

$('#kon_list').children('li').bind('touchstart mousedown', function(e) {

到

$('#kon_list').children('li').bind('vclick', function(e) {

这样，在用户抬起手指或释放鼠标按钮之前，弹出窗口不会显示。

于 2013-09-10T07:48:43.313 回答
0

问题的发生是因为移动浏览器从您点击按钮触发 click 事件开始等待大约 300 毫秒（在三星 Galaxy s2 上显然是 500 毫秒）。这种等待导致同时点击项目和弹出按钮。

解决方案是阻止浏览器等待。这可以通过fastclick 库来完成

于 2013-09-10T08:54:35.997 回答