点击目标

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不支持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);

Answer 2

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

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