如何處理鼠標中點擊？

我有一個生成用戶組列表的組件列表。當用戶點擊其中一個列表組件時，它會調用組件中定義的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); 
},

我怎樣才能讓這個組件中響應鼠標點擊？

來源

2017-09-21 Jibbles

此答案適用於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在灰燼處理。單擊事件的按鈕屬性可在MDN docs中找到。

重寫中間和右鍵點擊時要小心。這可能會導致某些用例出現問題的用戶界面。觸摸/移動沒有直接的等價物，許多鼠標沒有輪子。

來源

2017-09-22 03:09:24 handlebears

如何處理鼠標中點擊？

回答

相關問題