javascript - 点击目标

Question

看这段代码:

<div>
    <a href = "#"><span>Click me MAN !</span></a>
</div>

<script type = "text/javascript">
    window.onload = function () {
        document.body.addEventListener ("click", function (event) {
            var target = event.target;

            alert ("Returns \"" + target.nodeName + "\". Just want \"" + target.parentNode.nodeName + "\"")
        }, false);
    }
</script>

您可以在“链接”中看到元素“span”，当单击“链接”时，当前目标是相同的“span”。 “event.target”如何返回“link”而不是“span”。

谢谢，不，我不想使用“parentNode”。

Answer 1

使用您的方法，您要么必须手动向上遍历 DOM，直到遇到 <a>。元素或将监听器附加到链接本身并使用 this .

尽量减少事件监听器的数量通常是个好主意，下面是一个如何遍历 DOM 的示例。请注意，事件监听器在 IE 中不起作用，IE 不支持 addEventListener() DOM节点的方法。

实例:http://jsfiddle.net/timdown/pJp4J/

function getAncestor(node, tagName) {
    tagName = tagName.toUpperCase();
    while (node) {
        if (node.nodeType == 1 && node.nodeName == tagName) {
            return node;
        }
        node = node.parentNode;
    }
    return null;
}

document.body.addEventListener("click", function(event) {
    var target = getAncestor(event.target, "a");
    if (target !== null) {
        alert(target.nodeName);
    }
}, false);