lit-html: how to just listen on click of source element not children

Question

I have a template:

        <button 
        data-action="acknowledge"
        @click="${setCommentStatus}"
        type="button" 
        class="btn">
            <span class="text-dark">
              <i class="icon-foobar"></i>Foobar
            </span>
        </button>

The problem is that when the children elements are clicked they trigger the setCommentStatus function, is there any way to just listen when the actual element with the setCommentStatus function is clicked but not the children.

const setCommentStatus = {
  handleEvent(e) {
    const action = e.target.getAttribute('data-action');
    console.log('action', action);
  },
  capture: true
};

Answer 1

It is achievable by using e.currentTarget instead of e.target

const action = e.currentTarget.getAttribute('data-action');
console.log('action', action);