解决jQuery Mobile + PhoneGap中幻影点击的最简单方法? [英] Easiest way to fix ghost clicks in jQuery Mobile + PhoneGap?

问题描述

我似乎找不到解决此问题的任何简单方法?我不能全神贯注地使用 Google的快速按钮" 方法.因此，如果有人有其他选择，那就太好了.

I can't seem to find any straightforward way of fixing this? I can't wrap my head around Google's Fast Buttons approach. So if anyone has an alternative, that would be really nice.

我所说的幽灵点击是指对按钮的触摸或多次触发它的东西.例如，单击显示alert("hello");的按钮将显示该警报框2次，有时甚至是5次.

The ghost clicks I'm talking about is referring to the touch on a button or something that triggers it multiple times. For example, clicking a button that will show alert("hello"); will show that said alert box 2 or sometimes even 5 times.

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

This is part of my code that handles button pressing. I omitted some parts but basically, that's the mechanism that handles presses on the "add" button.

$('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;
    }
});

推荐答案

您在委派事件绑定内部发生了标准事件绑定.这意味着每次外部事件触发时，内部绑定都将被绑定.

You've got a standard event binding happening inside of a delegated event binding. That means that the inner-binding will be bound every time the outer-event fires.

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

So basically you're re-binding your tap event handler each time the pagebeforeshow fires for any pseudo-page. Each time you navigate to another page you're creating another inner-binding so you're getting multiple alerts.

一个好的解决方法是为pageinit页面事件创建一个委托事件处理程序，并在该事件处理程序中进行内部绑定. pageinit事件每个伪页面仅触发一次，因此您将不必继续添加不必要的事件处理程序.

A good fix is to create a delegated event handler for the pageinit page-event and do the inner-binding in that event handler. The pageinit event only fires once per pseudo-page so you won't keep adding more event handlers unnecessarily.

例如:

$(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().

You'll notice I used .on() for my delegated event handler instead of the depreciated .live().

这篇关于解决jQuery Mobile + PhoneGap中幻影点击的最简单方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！