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

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地址：https://www.cdcxhl.com/news47/315997.html

成都网站建设公司_创新互联，为您提供服务器托管、动态网站、网站设计、营销型网站建设、网站导航、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联