javascript - 在平板电脑上忽略 html 页面中的点击

Question

我正在处理 html 页面并且遇到性能问题 (?) 你可以看到我的示例页面。当我在平板电脑上打开它(我尝试过 iPad 2 和 Android 平板电脑)，并尽可能快地点击单元格时，只会处理每秒一次的点击。我究竟做错了什么？

在谷歌邮件中，我尝试点击邮件上的星星(同样，尽可能快)，它们最终都被激活了。

我还测量了点按 10 颗星所需的时间(在我的页面和 Gmail 上)。在这两种情况下，我都在不到 3 秒的时间内完成了。所以我在两个页面上点击相同的速度。

var count = 0;
function clicked(el) {
  el.style.backgroundColor = "black";
  count++;
  counter.textContent = count;
}

window.onload = function() {
  for (i = 0; i < 10; i++) {
    var row = document.createElement("tr");
    tbl.appendChild(row);

    var cell = document.createElement("td");
    row.appendChild(cell);

    cell.onclick = function() { clicked(this); };
  }
}

td {
  width: 50px;
  height: 50px;
  background-color: lightblue;
}

<table id="tbl">
</table>
<h1 id="counter"></h1>

Answer 1

默认情况下，大多数移动浏览器(iOS Safari、Android 浏览器、Chrome Mobile 等)在物理点击和触发 click 事件之间有大约 300 毫秒 的延迟。有必要双击 处理(缩放)。在这些情况下，您不能在 300 毫秒 内多次触发 click 事件。

如果你想在移动浏览器中通过点击立即触发你的功能，你应该使用Touch Events .

简单示例:

JSFiddle

var count = 0;
var tbl = document.getElementById('tbl');
var counter = document.getElementById('counter');
var tapping = false;

function click() {
    this.style.backgroundColor = 'black';
    count++;
    counter.textContent = count;
}

function touchStart() {
    tapping = true;
}

function touchCancel() {
    tapping = false;
}

function touchEnd(e) {
    click.apply(this);
    e.preventDefault();
    tapping = false;
}

for (i = 0; i < 10; i++) {
    var row = document.createElement('tr');
    tbl.appendChild(row);
    
    var cell = document.createElement('td');
    row.appendChild(cell);
    
    cell.addEventListener('click', click, false);
    cell.addEventListener('touchstart', touchStart, false);
    cell.addEventListener('touchmove', touchCancel, false);
    cell.addEventListener('touchcancel', touchCancel, false);
    cell.addEventListener('touchend', touchEnd, false);
}

td {
    width: 50px;
    height: 50px;
    background-color: lightblue;
}

<table id="tbl"></table>
<h1 id="counter"></h1>

此外，您不能更改代码并使用 FastClick图书馆。它消除了大多数流行浏览器的延迟，您只需要 attach it .