5

我构建了一个 WepApp，我喜欢使用来自 Google 的这段代码来消除触摸设备上 300 毫秒的延迟

文档
http://developers.google.com/mobile/articles/fast_buttons

我不确定，我在我的 HTC one X 上看不出这两个版本有什么区别。

演示 1（正常）
http://jsbin.com/awejal/4/edit

演示 2（带有 fastclick 修复）
http://jsbin.com/awejal/5/edit

我在控制台中得到（在演示 2 中）额外的错误，TypeError: element is null 但为什么呢？我不明白。

4

2 回答 2

1

几乎可以肯定，问题出在您的打字机上。像这样的 TypeError 意味着您试图在空对象上调用方法。你需要找出为什么你会得到那个打字错误，然后修复它。如果没有 DOM 和 jQuery 之间的正确链接，谷歌提供的代码将无济于事。

我认为导致您出现问题的线路是

new FastButton(document.getElementById("fastclick"), goSomewhere);

因为我没有看到任何带有 id 的元素fastclick。

尝试修复它，让我知道它是如何工作的

于 2012-11-22T21:40:42.160 回答
1

您确定您检测元素是否被切换的方法是正确的吗？它看起来像两者#onclick并#onclickJQ共享一个公共变量来检测它们应该处于哪个状态：bt = 0;. 因此，如果您尝试一个接一个地按下，第二次点击事件将没有可见的变化。为了解决这个问题，使用属性来存储关于切换状态的数据......

JS：

function blub(selector) {
    if ($(selector).attr("attr-bt") == "0") {
        $(selector).attr("attr-bt", "1");
        $(selector).css('background-color', '#aa0000');
    }
    else {
        $(selector).attr("attr-bt", "0");
        $(selector).css('background-color', '#333333');
    }
}
$(document).ready(function() {
    $('#onclickJQ').attr("attr-bt", "0");
    $('#onclick').attr("attr-bt", "0");
});

回答您的问题，要消除延迟，只需使用jQueryMobile和库提供的点击事件：

$(document).ready(function() {
    $('#onclickJQ').live("tap", function() {
        blub('#onclickJQ');
    });
});​

但是，必须修改第一个演示按钮 [带有内联 onclick 事件] 以专门使用点击事件：

$(document).ready(function() {
    $('#onclick').live("tap", function() {
        blub('#onclick');
    });
});​

演示： http: //fiddle.jshell.net/jnY2n/4/show/

在 iPhone 4S 上测试；第一个 div 在重复点击时会“滞后”，而第二个 div 运行平稳。

于 2012-11-27T12:12:21.403 回答