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”，当点击“链接”时，当前目标是相同的“范围”。 “event.target”如何返回“链接”而不是“span”。

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

Answer 1

使用您的方法，您必须手动遍历DOM，直到您点击<a>元素或将侦听器附加到链接本身并使用this。

最小化事件侦听器的数量通常是一个好主意，所以这里是一个如何遍历DOM的示例。请注意，事件侦听器不能在IE中工作，IE不支持DOM节点的addEventListener()方法。

实例：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);

Answer 2

为JavaScript添加此css提示。你会得到你想要的event.target。

a > *,
button > *{
  pointer-events:none;
}

Answer 3

你不能只使用

<span><a href="#">Click me</a></span> ?

点击目标

3 个答案: