I have a header menu where there are a few options for visitors to click on. All the options use a button[class=menu-link] element (123x65). Within each button element is a smaller span element (93x20) for the text of the button, e.g "Book A Flight". I do not want to restrict the click to the span as it is small and would rather capture the event off the button element. All the other buttons however in the header share the same button[class=menu-link] attribute and no other elements to distinguish one button from the next other than the child.
So question is how to set up a rule for the button when the child has a specific class value? I have tried several combinations of "Apply event directly to element" and the various bubbling options but can't seem to find the right combination.
Here is the exact outer HTML and I want to use the button element due to its size else I will only capture the event when a click is made directly on the span element
<button type="button" class="menu-link">
<span data-translation="header.menu.bookFlight">Book A Flight</span>
</button>
