Html page clicks ignored on tablet
I am working on a html page and have a performance issue (?) You can see my example page. When I open it on a tablet (I've tried iPad 2 and Android tablets) and the boxes are dumped as quickly as possible, only every second tap is processed. What am I doing wrong?
On Google mail I tried to click on the stars by mail (again, as quickly as possible), they all activated.
I also measured the time it takes to hit 10 stars (both on my page and on gmail). In both cases, I did it in less than 3 seconds. So I hit the same speed on both pages.
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>
source to share
Most mobile browsers (iOS Safari, Android Browser, Chrome Mobile, etc.) delay around 300ms between a physical click and the click
default triggering event . It is necessary to double the manipulation of the crane (magnification). You cannot trigger the event click
in these cases more than once every 300ms.
If you want to immediately launch your function by clicking in a mobile browser, you must use Touch Events .
Simple example:
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>
Also, you cannot change your code and use the FastClick library. It removes latency for most popular browsers, you need to attach it .
source to share