如何处理鼠标中键？答案

【问题标题】：How to handle middle mouse click?如何处理鼠标中键？
【发布时间】：2018-03-03 01:34:46
【问题描述】：

我有一个生成用户组列表的 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);
},

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

【问题讨论】：

标签： javascript ember.js

【解决方案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 出现问题。触摸/移动没有直接的等价物，而且许多鼠标没有轮子。

【讨论】：