In Ember what is the best way to stop propagation with select tag

In Ember I want to have a parent div that when clicked will call an action, except if a select tag is clicked within that div. I eventually came up with a solution but it's not very good and was wondering if someone could explain why bubbles=false does not work in this case, and how I can get access to the event on the selectValue action (details below).

Originally I had:

<div class="parent-class" >
    <select onchange=>
        <option class="default-option" disabled selected value>-</option>
        
            <option value= selected=></option>
        
    </select>
</div>

But I didn't want the action 'shouldNotBeCalledOnSelect' to be called when the select tag is clicked. I tried bubbles=false on the selectValue action, but this didn't work. I couldn't think of a way to pass the event with the selectValue action as it is, if I could then I could call

event.stopPropagation();

With an action you can get the event by using

onclick=

and then the event can be retrieved in the Javascript as the last parameter. The solution I have achieved, which is a bit rubbish, is to have both onchange and onclick events on the select tag and use onclick exclusively for stopping propagation.

<div class="parent-class" >
    <select onchange= onclick=>
        <option class="default-option" disabled selected value>-</option>
        
            <option value= selected=></option>
        
    </select>
</div>

In the javascript I then have:

selectValue(value) {
    this.set('score.value', value);
    this.get('score').save();
},

stopPropagation(event) {
    event.stopPropagation();
},

shouldNotBeCalledOnSelect() {
    console.log("CALLED");
}