在jQuery Mobile + PhoneGap中修复鬼点击的最简单方法是什么?

时间:2012-10-09 06:37:51

标签: jquery-mobile cordova touch

我似乎找不到任何直接解决这个问题的方法?我无法绕过Google's Fast Buttons方法。所以,如果有人有替代方案,那将是非常好的。

幽灵点击我所说的是指触摸某个按钮或多次触发它的东西。例如,单击将显示alert("hello");的按钮将显示所述警告框2或有时甚至5次。

这是我处理按钮按下的代码的一部分。我省略了一些部分,但基本上,这是处理按下"添加"的机制。按钮。

$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    var db = window.openDatabase("mydb", "1.0", "MyDB", 1000000);

    var url = window.location.href;
    var filename = url.substring(url.lastIndexOf('/')+1);

    switch (filename) {
        case "index.html":
            $("#add").tap(function(e){
                if ($("#info").val() == "") {
                    navigator.notification.alert("The info cannot be blank!", function(){}, "Error", "Okay, got it!");
                } else {
                    db.transaction(addToDb, errorCB, addedToDb);
                }
            });
            break;
        case "sample.html":
            break;
    }
});

1 个答案:

答案 0 :(得分:1)

您在委派的事件绑定中发生了标准事件绑定。这意味着每次外部事件触发时都会绑定内部绑定。

因此,每当tap触发任何伪页面时,您基本上都会重新绑定pagebeforeshow事件处理程序。每次导航到另一个页面时,您都会创建另一个内部绑定,因此您将收到多个警报。

一个很好的解决方法是为pageinit页面事件创建委托事件处理程序,并在该事件处理程序中执行内部绑定。 pageinit事件仅针对每个伪页面触发一次,因此您不会不必要地添加更多事件处理程序。

例如:

$(document).on('pageinit', '.ui-page',function(){
    var db       = window.openDatabase("mydb", "1.0", "MyDB", 1000000),
        url      = window.location.href,
        filename = url.substring(url.lastIndexOf('/')+1);

    switch (filename) {
        case "index.html":
            $("#add").tap(function(e){
                if ($("#info").val() == "") {
                    navigator.notification.alert("The info cannot be blank!", function(){}, "Error", "Okay, got it!");
                } else {
                    db.transaction(addToDb, errorCB, addedToDb);
                }
            });
            break;
        case "sample.html":
            break;
    }
});

您会注意到我使用了.on()作为我的委托事件处理程序而不是折旧的.live()