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悬停效果现在会对悬停和点击外部原始按钮元素作出反应。我认为这是一个丑陋的解决方案。当然其他人之前遇到过这个问题。有没有更好的解决方案？

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

Answer 1

要解决尺寸问题，您需要将按钮添加到按钮的包装中，即使按钮处于活动状态，也会保持尺寸。

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

可点击的按钮区域，可在按下时缩小

1 个答案: