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移动设备等）在物理点按和click事件触发之间的延迟大约 300ms 。双击处理（缩放）是必要的。在 300ms 中，您不能在这些情况下更频繁地触发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。

平板电脑上忽略了html页面中的点击次数

1 个答案: