javascript - 如何处理鼠标中键单击？

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

并且rillToGroup操作执行以下操作

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中找到.

覆盖中键单击和右键单击时要小心。对于某些用例来说，这可能会导致用户界面出现问题。触摸/移动没有直接等效的东西，而且许多鼠标没有轮子。