模擬按鈕點擊印象

Question

這個流星客戶端代碼試圖給人一個按鈕被點擊的印象。它使用onmousedown事件將類應用於div，但它在檢查瀏覽器元素選項卡時不應用該類。
它有什麼問題？由於

Template.footer.events({ 
    'click .footerItem': function(event) { 
    //do some stuff here 
    }, 
    'onmousedown .footerItem': function(event) { 
    $(event.target).addClass('inset'); 
    }, 
    'onmouseup .footerItem': function(event) { 
    $(event.target).removeClass('inset'); 
    } 
}); 

.inset { 
    box-shadow: inset 2px 2px 6px #999; 
} 

.footer-row { 
    text-align: justify; 
    background-color: white; 
} 

<template name="footer"> 
    <footer class="footer-row"> 
    {{#each footerButtons}} 
    <div class="footerItem" data-action={{this.action}}>{{this.label}</div> 
    {{/each}} 
    </footer> 
</template> 

Answer 1

您應該使用：聚焦和：活躍的CSS的狀態。我的建議是儘可能少地嘗試使用JavaScript。

焦點CSS僞類在元素獲得焦點時應用，無論是從用戶使用鍵盤選擇它還是通過用鼠標激活（例如表單輸入）。

當用戶激活元素時，活動CSS僞類匹配。它允許頁面反饋瀏覽器檢測到激活。

CSS：

.footer-row { 
    text-align: justify; 
    background-color: white; 
} 

.footer-row:active, 
.footer-row:focus { 
    box-shadow: inset 2px 2px 6px #999; 
} 

Answer 2

嘗試分別以"mousedown"和"mouseup"，而不是"onmousedown"和"onmouseup"。