@tannerdolby What I find curious is how we even get into this conditional if the target does not contains a class with the name example-choice

@schalkneethling I found that a bit curious as well. It works, but is confusing at first glance. Its essentially saying if a user clicks inside the <code> element in example choices and not within the parent <div class="example-choice"> container then find the nearest parent example choice div with findParentChoiceElem.

So if we click directly on the edge/border of example choices, the event.target will be the <div class="example-choice"> which does have the class 'example-choice' so the if statement is not entered and the target is passed to mce.onChoose(target). If we click inside the example choices, the event.target will be the <code class="language-*"> elements and there won't have the .example-choice class so we enter the conditional block and find the nearest parent element with mce.findParentChoiceElem(target). Below is a short demo.

@tannerdolby What if we do this. We add the following function:

function handleChoiceEvent() {
    if (this.classList.contains('copy')) {
        mceAnalytics.trackEvent({
            category: 'Interactive Example - CSS',
            action: 'Copy to clipboard clicked',
            label: 'Interaction Events',
        });
    }

    // and pass it on to `onChoose`
    module.exports.onChoose(this);
}

and then we replace this block of code with:

const exmapleChoices = exampleChoiceList.querySelectorAll(
        '.example-choice'
    );
    Array.from(exmapleChoices).forEach((choice) => {
        choice.addEventListener('click', handleChoiceEvent);
    });

Yeah this looks good!