將樣式添加到 div 后奇怪的 onclick 行為

Question

我有 html：

<div>
    <div id='icon_zoom_in' class='icon'>+</div>
    <div id='icon_zoom_out' class='icon'>-</div>
</div>  

我添加了 CSS：

.icon{
    color: white;
    font-size: 100px;
    background-color: black;
    opacity: 0.7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}  

結果很好（忽略字體，我安裝了 chrome 擴展）：

但是當我在“按鈕”上添加點擊事件時，會發生奇怪的事情：

var $ = function(id) {
    return document.getElementById(id);
}
$("icon_zoom_in").addEventListener("click", function() {
    console.log("zoom in");
}, false);
$("icon_zoom_out").addEventListener("click", function() {
    console.log("zoom out");
}, false);  

當我單擊“+”按鈕時，我得到了zoom out ！ 我必須單擊它的外部空間才能zoom in 。
jsfiddle： http://jsfiddle.net/wong2/w2dRB/

Answer 1

超級簡單：在 Chrome 中，文本溢出。 實際上，當您單擊加號時，您正在單擊減號。 使用overflow: hidden; 加號和減號將粘在按鈕內。 在這里（JSFiddle）您可以測試正確的行為。