[英]Strange onclick behavior after add style to div
I have html:我有 html:
<div>
<div id='icon_zoom_in' class='icon'>+</div>
<div id='icon_zoom_out' class='icon'>-</div>
</div>
And I add CSS:我添加了 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;
}
The result is nice(ignore the font, I installed a chrome extension):结果很好(忽略字体,我安装了 chrome 扩展):
But when I add click event on there "buttons", strange things happen:但是当我在“按钮”上添加点击事件时,会发生奇怪的事情:
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);
When I click the "+" button, I got zoom out
!当我单击“+”按钮时,我得到了
zoom out
! I have to click the outter space of it to get zoom in
.我必须单击它的外部空间才能
zoom in
。
jsfiddle: http://jsfiddle.net/wong2/w2dRB/ jsfiddle: http://jsfiddle.net/wong2/w2dRB/
Super simple: in Chrome the text is overflowing.超级简单:在 Chrome 中,文本溢出。 Actually when you click the plus you are clicking the minus because of this.
实际上,当您单击加号时,您正在单击减号。 Use
overflow: hidden;
使用
overflow: hidden;
and the plus and minus will stick inside the buttons.加号和减号将粘在按钮内。 Here (JSFiddle) you can test the correct behaviour.
在这里(JSFiddle)您可以测试正确的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.