addEventListener控件

Question

(很抱歉截图，出于某种原因，它不允许我上传代码)

在我的JS中实现addEventListener。

console.log(event.target)

根据您按下按钮的哪一部分，我会得到不同的结果(因为徽标或实际的按钮)。如何让JS忽略logo，只返回button元素？

<div class="images">
    <div class="pic_01">
        <div class="column">
            <img class="img" id="1" src="photo/1.jpg">
            <button id="button1" class="like_button" type="button">
                <img class="like_logo" src="images/like.png">&nbsp;
                <div>2
                </div>
            </button>
        </div>
    </div>
</div>

​

​

Answer 1

您应该使用event.currentTarget而不是event.target。即使单击子节点，您也将获得事件侦听器附加到的节点。

您可以递归地检查父节点，以查看是否单击了按钮或子元素。

 document.querySelector('.images').addEventListener('click', function (event) {
        var button = handleClickEvent(event.target, event.currentTarget);
        if (button) {
            alert('clicked button');
        }
    }, false);

    function handleClickEvent(node, targetNode) {
        if (node.tagName == 'BUTTON') {
            return node;
        }
        else if (node == targetNode) {
            return;
        }
        return handleClickEvent(node.parentNode, targetNode);
    }