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

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 事件的一部分。

此处已对此进行了介绍，但我发现该解决方案没有吸引力： Non-clickable area on transforming anchor

这里提供了相同的解决方案： increasing clickable area of a button

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

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

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

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

Answer 1

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

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