如何处理鼠标中键单击？

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. The button attribute of a click event can be found in MDN docs 中的 Ember 中阅读有关事件处理的更多信息。

覆盖中键和右键单击时要小心。对于某些用例，它可能会导致问题 UI。 touch/mobile 没有直接的等价物，许多鼠标没有轮子。

如何处理鼠标中键单击？

How to handle middle mouse click?

javascript

ember.js