How to handle middle mouse click?

Question

I have an ember component that generates a list of groups of users. When a user clicks on one of the list components it calls a linkAction defined in the component and brings the user to the particular page associated with that list item. However when a user middle mouse clicks this component the user is then brought to /# by default and I cant figure out how to handle this behavior.

For reference here is the component as seen in the template.

    {{student-group-item linkAction='drillToGroup' drillId=teacherGroup.id
                group_name=teacherGroup.studentGroupName
                meta_class="quiz-item-meta"
                item_1_title= teacherGroup.numStudentsDisplay
                item_1_class="group-count"
                item_2_title=teacherGroup.createdDate
                item_2_class="created-on"
                item_3_title=teacherGroup.shortDescription
                item_3_class="group-desc"}}

and the drillToGroup action does the following

drillToGroup: function(id) {
  this.transitionTo('student-group',id);
},

How can I make this component respond to middle mouse click?

score 4 · Accepted Answer · answered Sep 22 '17 at 03:09

This answer applies to Ember 2.x.x and was written as of version 2.15.

By default, closure events receive the event as an argument by default. For whatever reason, mousedown will detect middle clicks. Regular onclick does not.

In your template:

<button onmousedown={{action "clicked"}}>button</button>

In your component js:

actions: {
  clicked(event) {
    console.log(event.button)
    // do things based on button value of 0, 1, or 2. 1 is middle.
  }
}

You can read more about event handling in Ember in The Guides. The button attribute of a click event can be found in MDN docs.

Be cautious when overriding middle and right clicks. It could lead to problematic UI for some use cases. There is no direct equivalent for touch/mobile, and many mice don't have wheels.

How to handle middle mouse click?

1 Answers1