单击时缩小的按钮的可单击区域

Question

我有一个元素，它充当带有一点Javascript和CSS的按钮。我将把它简化为最裸露的例子，这样你就可以看到问题所在。该问题源于以下事实：单击元素时元素会缩小。Javascript 将按钮的可点击区域解释为其缩小的大小，而不是原始大小。这发生在所有现代桌面浏览器中。

以下是重要部分。.HTML：

<div id="refresh">more</div>

.CSS：

#refresh {
    background-color: #FFF;
    cursor: pointer;
    transition: all 150ms ease-out;
}
#refresh:active {
    transform: scale(0.8);
}

.JS：

var refreshBtn = document.getElementById("refresh");
function newImg() {
    // updates an image elsewhere
}
// an event listener based on 
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
addEvent(refreshBtn, 'click', newImg);

因此，当我单击由transform: scale(0.8)定义的缩小按钮所占据的区域时，我的图像会更新。如果我在该区域之外单击，在按钮的外部 20% 处，我的 JS 不会更新图像。发生正确的单击转换，光标正确显示为pointer，但 JS 不将此区域计为onclick事件的一部分。

这里涵盖了这一点，但我发现解决方案没有吸引力：变换锚点上的不可单击区域

此处提供了相同的解决方案：增加按钮的可点击区域

以下是我在这些答案中概述的 CSS：

#refresh:before {
    position: absolute;
    content: '';
    top: -12%;
    right: -12%;
    left: -12%;
    bottom: -12%;
}

这些确保 Javascript 现在可以识别更大的可点击区域而不是缩小区域，但反过来指针和 CSS 悬停效果现在会对原始按钮元素之外的悬停和单击做出反应。我认为这是一个丑陋的解决方案。肯定其他人以前遇到过这个问题。有没有更好的解决方案？

更新：这是我解释的情况的jsfidd：http://jsfiddle.net/cx9ur44e/4/

Answer 1

要解决大小问题，您需要将单击添加到按钮的包装器中，即使按钮处于活动状态，该包装器也会保持大小。

<div id="wrapper>
    <div id="refresh">more</div>
</div>