Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^