버튼 클릭 인상 시뮬레이션

Question

이 유성 클라이언트 코드는 버튼이 클릭되었다는 인상을 주려고합니다. 이벤트를 사용하여 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"를 사용해보십시오.