How can a touch be intercepted and some custom action perform for some elements but the usual behaviour happen for others?
<p>I'm loading html pages on iOS and want to intercept the user touching the screen anywhere that isn't an anchor/link/button etc. and perform some action, however if the touch on a link etc. I want the action/behaviour associated with that to be performed as usual.
In order to intercept the touches I am executing the following script:</p>

<pre><code>var script = document.createElement('script');  
script.type = 'text/javascript';  
script.text = window.onload = function addListener() {
alert('adding listener');

function init() {
    document.documentElement.addEventListener("touchstart", function (e) 
            {
                    if (['A', 'BUTTON', 'AREA'].indexOf(e.target.tagName) === -1) 
                    {
                          e.preventDefault();
                          e.stopPropagation();
                          invokeObjectiveC("ontouchstart:");
                    }
            }, false);
}

if (document.readyState === "complete") {
    init();
} else {
    document.addEventListener('DOMContentLoaded', init, false);
    }
 }
function invokeObjectiveC(action) {
    var iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", action);
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
}
document.getElementsByTagName('head')[0].appendChild(script);
</code></pre>

<p>This works up to a point, InvokeObjectiveC() is being called when I want it to, but if the html contains a section such as this:</p>

<pre><code>    &lt;div id="B145" class="abutton w80xh42" &gt;
        &lt;map name="B145_map" id="B145_map" &gt;
            &lt;area shape="rect" coords="0,0,80,42" href="XYZ:Action_Test45id" alt="" /&gt;
        &lt;/map&gt;
        &lt;img id="B145_img" src="transparent_80x42.png" usemap="B145_map" alt="" /&gt;
    &lt;/div&gt;
</code></pre>

<p>then when the button is touched nothing happens - but it would if my script wasn't executed. So my script code is interfering with the normal behaviour if the user clicks on a button or link etc. How can I get my script to intercept if the user touches somewhere which isn't a button/link etc. but not affect other things when the user touches/clicks a button/link etc.?</p>
