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

您应该使用：focus和：active css states。我的建议是视觉效果尝试尽可能少地使用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

分别尝试使用.login-form-section { width: 100%; background: black; position: relative; height: 200px; } .login-form{ position: absolute; width: 100%; padding: 20px 0; top: 50%; left: 50%; background: GRAY; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .login-form h1{margin: 0; margin-bottom: 10px;}和"mousedown"代替"mouseup"和"onmousedown"。

模拟按钮点击展示

2 个答案: