[英]Strange onclick behavior after add style to div
我有 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/
超级简单:在 Chrome 中,文本溢出。 实际上,当您单击加号时,您正在单击减号。 使用overflow: hidden;
加号和减号将粘在按钮内。 在这里(JSFiddle)您可以测试正确的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.