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

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) 定义的 scaled down 按钮占据的区域时，我的图像得到更新。如果我在那个区域之外单击，在我的按钮的外部 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 悬停效果现在可以对悬停和单击作出 react ，在原始按钮元素之外.我认为这是一个丑陋的解决方案。肯定有人以前遇到过这个问题。有没有更好的解决方案？

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

Answer 1

要解决尺寸问题，您甚至需要将点击添加到按钮的包装器中，即使按钮处于事件状态也能保持尺寸。

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