Vanilla JS event delegation - dealing with child elements of the target element

I'm trying to do event delegation in vanilla JS. I have a button inside a container like this

<div id="quiz">
    <button id="game-again" class="game-again">
        <span class="icon-spinner icon"></span>
        <span>Go again</span>
    </button>
</div>

And following David Walsh's nice instructions I'm adding an event handler to an ancestor of the button like so:

this.container.addEventListener('click', function(e){
    if (e.target && e.target.id == 'game-again') {
        e.stopPropagation();
        self.publish('primo:evento');
    }
});

Where this.container is the #quiz element. This works half the time, but the rest of the time the target of the click event is one of the spans inside the button, so my event handler isn't called. What's the best way to deal with this situation?

Another solution: Use closest():

this.container.addEventListener('click', function(e) {
    let buttonElem = e.target.closest('button');

    if (buttonElem) {
        e.stopPropagation();
        self.publish('primo:evento');
    }
});

This is short, straightforward (the solution is, well, close to the problem) and gives you the specific button that was clicked.