javascript - 如何拦截触摸并对某些元素执行某些自定义操作，而对其他元素执行通常的行为？

Question

我正在 iOS 上加载 html 页面，并希望拦截用户触摸屏幕上非 anchor /链接/按钮等的位置，并执行一些操作，但是如果触摸链接等，我想要与照常执行的操作相关的 Action /行为。为了拦截触摸，我正在执行以下脚本:

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);

这在一定程度上是有效的，当我想要它的时候就会调用 InvokeObjectiveC()，但是如果 html 包含这样的部分:

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

然后，当触摸按钮时，什么也不会发生 - 但如果我的脚本没有执行，就会发生。因此，如果用户单击按钮或链接等，我的脚本代码会干扰正常行为。如果用户触摸不是按钮/链接等的地方，我怎样才能让我的脚本进行拦截，但不会影响其他事情用户触摸/单击按钮/链接等？

Answer 1

我在这个例子中使用了委托(delegate):http://jsfiddle.net/DdcJJ/6/使用 YUI JavaScript 库来实现结果。非常简单的事情，当您单击 AREA 元素时，您会从该元素的 href 值看到 JavaScript 正在运行。

我确实尝试使用 YUI 的选择器实用程序将除 AREA 标记之外的所有元素设为委托(delegate)目标，这可能更清晰，但正如您在此处看到的:http://jsfiddle.net/tAt4m/1/我们捕获委托(delegate)事件(因为 MAP 包装了 AREA)和默认事件。

我猜你可以在没有 JavaScript 库的情况下获得相同的结果，但无论如何都有一个概念证明可以使用!