Chrome设置radius时的事件响应问题

2024-01-29    分类: 网站建设

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。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设