如何处理鼠标中键？

Question

我有一个ember组件，可以生成一组用户列表。当用户单击其中一个列表组件时，它会调用组件中定义的linkAction，并将用户带到与该列表项关联的特定页面。但是，当用户中间鼠标单击此组件时，默认情况下用户将被带到/＃，我无法弄清楚如何处理此行为。

此处的参考是模板中显示的组件。

    {{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"}}

并且drillToGroup操作执行以下操作

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

如何让这个组件响应鼠标中键？

Answer 1

此答案适用于Ember 2.x.x，自2.15版开始编写。

默认情况下，关闭事件默认情况下将事件作为参数接收。无论出于何种原因，mousedown will detect middle clicks。定期onclick没有。

在你的模板中：

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

在你的组件js：

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

您可以在The Guides中详细了解Ember中的事件处理。点击事件的按钮属性可在MDN docs。

中找到

在覆盖中间和右键单击时要小心。它可能会导致某些用例的UI出现问题。触摸/移动没有直接的等价物，许多老鼠没有轮子。