Chrome设置radius时的事件响应问题
在Firefox和IE中,只要设置了border-radius和overflow:hidden被切掉的部分就不会再响应事件了。而在Chrome中被切掉的部分依然会响应事件。虽然对内部元素也设置上border-radius可以解决部分问题,但是对于替换型元素,无论如何设置都不会奏效。
看下面这个例子
运行<style>
.circ {
border:1px solid #CCC;background:#FAFAFA;
width:200px;height:200px;overflow:hidden;
float:left;margin:10px;
border-radius:100%;
}
.circ:hover {background:#EEE;}
.rect1 {width:100%;height:100%;}
.rect2 {width:100%;height:100%;border-radius:100%;}
.rect3 {width:100%;height:100%;border-radius:100%;}
</style>
<div class="circ"><div class="rect1"></div></div>
<div class="circ"><div class="rect2"></div></div>
<div class="circ"><canvas class="rect2"></canvas></div>
这个例子中三个圆的行为在IE和Firefox上是相同的。但是在Chrome上,第一个和第三个圆的鼠标响应区域是矩形的,只有中间的圆是圆形的。第一个圆是因为radius无法切掉内部矩形的鼠标响应区域,第二个圆是因为内部的区域也是个圆,所以可以正常工作。第三个圆是因为内部是替换型元素,即使它是圆的也有个矩形的响应范围。
从纯CSS上暂时没办法解决这个问题,这属于Chrome的BUG。但如果是JavaScript我们可以自己计算这个区域。对于border-radius是满的物体,这个是很容易计算的,只要计算坐标是否在椭圆内即可。
运行<style>
#circ {
border:1px solid #CCC;background:#FAFAFA;
width:200px;height:200px;overflow:hidden;
border-radius:100%;
}
canvas {width:100%;height:100%;}
</style>
<div id="circ"><canvas></canvas></div>
<script>
onload=function(){
//获取对象的位置和大小,如果是动态的可以动态获取
var pw=circ.offsetWidth/2,ph=circ.offsetHeight/2,
px=circ.offsetLeft,py=circ.offsetTop;
circ.onmouseout=circ.onmousemove=function(e){
//计算鼠标在从圆心开始的x和y位置
var x=(e.pageX-px)-pw,y=(e.pageY-py)-ph;
//计算椭圆
if(x*x/pw/pw+y*y/ph/ph<1)
this.style.backgroundColor="#EEE"; //hover
else
this.style.backgroundColor=""; //normal
};
};
</script>
但是border-radius不满就很麻烦了,因为图形可能是圆角矩形,四个角的半径还有可能不同,所以需要分别计算。但是这种情况应该不会出现的太多,通常做圆角矩形时圆角的半径并不会设置太大,因此即使整个区域作为矩形来响应事件也没问题,特意去为这个计算坐标反而得不偿失。这个效果我暂时也用不到就不做演示了,总之这个BUG在Chrome上迟早会得到修复的,只要解决眼下的问题即可。
测试于:Chrome 31.0.1650.57 m
本文名称:Chrome设置radius时的事件响应问题
URL地址:/news47/315997.html
成都网站建设公司_创新互联,为您提供服务器托管、动态网站、网站设计、营销型网站建设、网站导航、电子商务
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联