javascript - 添加样式到 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); 

当我点击“+”按钮时，我得到了缩小!我必须点击它的外部空间才能放大。
jsfiddle:http://jsfiddle.net/wong2/w2dRB/

Answer 1

super 简单:在 Chrome 中，文本溢出。实际上，当您单击加号时，您实际上是在单击减号。使用overflow:hidden;，加号和减号将粘在按钮内。 Here (JSFiddle)您可以测试正确的行为。