iphone - 使用 jQuery Mobile 在 iPhone webapp 上第一次点击后忽略多次按钮点击？

Question

假设在使用 jQuery Mobile 构建的 HTML5 网络应用程序中使用按钮 A。

如果有人点击按钮 A，我们调用 foo()。即使用户双击按钮 A，Foo() 也应该被调用一次。

我们尝试使用 event.preventDefault()，但这并没有阻止第二次点击调用 foo()。 event.stopImmediatePropagation() 可能有效，但它也会停止堆栈中更上层的其他方法，并且可能不会导致干净的代码维护。

其他建议？维护一个跟踪变量似乎是一个非常丑陋的解决方案，也是不可取的。

Answer 1

您可以设置一个标志并检查是否可以运行 foo() 函数或在您不希望用户能够使用它的时间取消绑定(bind)事件然后重新- 在延迟后绑定(bind)事件处理程序(只有几个选项)。

这是我会做的。我会使用超时来排除后续事件:

$(document).delegate('#my-page-id', 'pageinit', function () {

    //setup a flag to determine if it's OK to run the event handler
    var okFlag = true;

    //bind event handler to the element in question for the `click` event
    $('#my-button-id').bind('click', function () {

        //check to see if the flag is set to `true`, do nothing if it's not
        if (okFlag) {

            //set the flag to `false` so the event handler will be disabled until the timeout resolves
            okFlag = false;

            //set a timeout to set the flag back to `true` which enables the event handler once again
            //you can change the delay for the timeout to whatever you may need, note that units are in milliseconds
            setTimeout(function () {
                okFlag = true; 
            }, 300);

            //and now, finally, run your original event handler
            foo();
        }
    });
});