模拟按钮点击印象

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