Question

我在JS中使用css和事件处理程序中的动画时遇到问题。我必须为我的按钮指定特定样式（正常和使用：活动后缀）。这个解决方案让我模拟了点击按钮＆＃39;。在Html（这是角度指令）我有指令ng-单击该按钮但它只在我点击按钮的主体而不是边框时运行事件。但是我的css在边框上设置了指针，并且在点击边框上也有动画。

我正在寻找修复该事件的最佳实践/解决方案。也许我必须保留带有活动后缀的css样式或者为我的样式添加一些内容。

CSS

#addButton {
    padding: 5px;
    float: left;
    background: linear-gradient(#92AFDE, #668FED);
    border: solid 2px #14438F;
    margin-left: 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
}
#addButton:ACTIVE {
    transform: translateY(4px);
}

HTML

<div class="card">
    <img ng-click="selectCard()" style="width: 150px; height: 200px;"   ng-src="cards/\{{cardId}}.png"></img>
    <button  ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
    <div id="delButton">X</div>
</div>

Answer 1

因为当你指定边框时，它会出现在元素的实际宽度之后。

使用

#addButton{ box-sizing:border-box }

此css属性将合并实际宽度的边框空间。

Answer 2

在我正在开发的项目中遇到了同样的问题。我使用了以上答案https://stackoverflow.com/a/38826326/7622397。但这没有用。单击边框不会触发click事件。但重要的是添加box-sizing: border-box（如答案中所述），以确保以下提到的解决方法有效

评论中提到的原因似乎是正确的

好的，我知道问题出在哪里。如果我单击按钮，则“激活”后缀会将按钮向下移动，浏览器不会注意到单击此按钮，因为指针位于我的div之外（移动后）

作为一种解决方法，我在按钮外创建了一个div，给了padding-top css（值等于或大于translateY的高度），并将onClick事件提供给了div而不是按钮。我知道，这不是一个整洁的解决方案，但肯定可以。

参考代码

.sw-form-button-card {
    padding: 5px 10px;
    text-decoration: none;
    background: #668ad8;
    color: #FFF;
    border: none;
    box-sizing:border-box;
    border-bottom: solid 3px #627295;
    border-radius: 3px;
    cursor: pointer;
}
.sw-form-button-card:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    border-bottom: none;
}

HTML部分：

<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
    <button class="sw-form-button-card">
        <span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
    </button>
</div>

点击边框不要激活活动

2 个答案: