43 replies

Weird button hitbox(click-area?)

Hello! I'm having problem with button click-area when using Event Delegation. Basically only a small part of button is respond to being clicked if button has content inside of it, but if I directly target it with EventListener it works fine. Why is that?

Picture below is example of a button, consisted of <img> and <p> tag. It only registers click when clicked between the "arrow" and "Reply" text when being targeted by EventDelegation, but works fine when you attach Listener to it.

Project link below if you want to test it. When you click in between arrow and text, in console "Not working" text will appear, when it should appear when clicked on the whole button.

document.addEventListener('click', function (event) {
    if (event.target.matches('.reply-btn')) {
        console.log('Not working');
    }
});

document.addEventListener('click', function (event) {
    if (event.target.matches('.reply-btn')) {
        console.log('Not working');
    }
});

document.addEventListener('click', function (event) {
    if (event.target.matches('.reply-btn')) {
        console.log('Not working');
    }
});

document.addEventListener('click', function (event) {
    if (event.target.matches('.reply-btn')) {
        console.log('Not working');
    }
});

Code being used to show that message, where "reply-btn" is class name of the whole button.

<button class="reply-btn">
                    <img class="reply-icon" src="images/icon-reply.svg" alt="Reply Icon">
                    <p class="reply-p">Reply</p>
                </button>

<button class="reply-btn">
                    <img class="reply-icon" src="images/icon-reply.svg" alt="Reply Icon">
                    <p class="reply-p">Reply</p>
                </button>

<button class="reply-btn">
                    <img class="reply-icon" src="images/icon-reply.svg" alt="Reply Icon">
                    <p class="reply-p">Reply</p>
                </button>

<button class="reply-btn">
                    <img class="reply-icon" src="images/icon-reply.svg" alt="Reply Icon">
                    <p class="reply-p">Reply</p>
                </button>

Button HTML

Project link: https://astonishing-cupcake-035f30.netlify.app/

Weird button hitbox(click-area?)

Similar Threads

Similar Threads

Similar Threads