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地址：http://m.kartarina.com/news47/315997.html

成都網站建設公司_創新互聯，為您提供服務器托管、動態網站、網站設計、營銷型網站建設、網站導航、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯