Question

I read here and there about touch but I can’t get to it completely. I have an app where I am blocking all touch events on the document.

document.addEventListener('touchstart', function (e) { e.preventDefault(); }, false);
document.addEventListener('touchend', function (e) { e.preventDefault(); }, false);

Now I have somewhere in the document which was working fine before adding above lines but now not.

<form onsubmit="search(event)">
    <input id="q" type="text" placeholder="Search.." />
</form>

Blocking document touch are very needed. How can I recitfy the problem and please if you know of any guide that describes touch events in detail that would be wonderful.

Answer 1

Right now you are blocking ALL touch events, but what you really want to do is block all touch events EXCEPT: x, y and z;

You’ll just have to make your preventDefault() conditional.

e.g.

document.addEventListener('touchstart', function (e) {
    e=e||window.event;
    var recip=e.target||e.srcElement;
    if(recip.nodeName.toLowerCase()=='input'){return true;}
    e.preventDefault();
}, false);