Chrome設(shè)置radius時(shí)的事件響應(yīng)問題

2024-01-29    分類： 網(wǎng)站建設(shè)

Chrome設(shè)置radius時(shí)的事件響應(yīng)問題 在Firefox和IE中，只要設(shè)置了border-radius和overflow:hidden被切掉的部分就不會(huì)再響應(yīng)事件了。而在Chrome中被切掉的部分依然會(huì)響應(yīng)事件。雖然對(duì)內(nèi)部元素也設(shè)置上border-radius可以解決部分問題，但是對(duì)于替換型元素，無論如何設(shè)置都不會(huì)奏效。 看下面這個(gè)例子 運(yùn)行<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> 這個(gè)例子中三個(gè)圓的行為在IE和Firefox上是相同的。但是在Chrome上，第一個(gè)和第三個(gè)圓的鼠標(biāo)響應(yīng)區(qū)域是矩形的，只有中間的圓是圓形的。第一個(gè)圓是因?yàn)閞adius無法切掉內(nèi)部矩形的鼠標(biāo)響應(yīng)區(qū)域，第二個(gè)圓是因?yàn)閮?nèi)部的區(qū)域也是個(gè)圓，所以可以正常工作。第三個(gè)圓是因?yàn)閮?nèi)部是替換型元素，即使它是圓的也有個(gè)矩形的響應(yīng)范圍。 從純CSS上暫時(shí)沒辦法解決這個(gè)問題，這屬于Chrome的BUG。但如果是JavaScript我們可以自己計(jì)算這個(gè)區(qū)域。對(duì)于border-radius是滿的物體，這個(gè)是很容易計(jì)算的，只要計(jì)算坐標(biāo)是否在橢圓內(nèi)即可。 運(yùn)行<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(){ //獲取對(duì)象的位置和大小，如果是動(dòng)態(tài)的可以動(dòng)態(tài)獲取 var pw=circ.offsetWidth/2,ph=circ.offsetHeight/2, px=circ.offsetLeft,py=circ.offsetTop; circ.onmouseout=circ.onmousemove=function(e){ //計(jì)算鼠標(biāo)在從圓心開始的x和y位置 var x=(e.pageX-px)-pw,y=(e.pageY-py)-ph; //計(jì)算橢圓 if(x*x/pw/pw+y*y/ph/ph<1) this.style.backgroundColor="#EEE"; //hover else this.style.backgroundColor=""; //normal }; }; </script> 但是border-radius不滿就很麻煩了，因?yàn)閳D形可能是圓角矩形，四個(gè)角的半徑還有可能不同，所以需要分別計(jì)算。但是這種情況應(yīng)該不會(huì)出現(xiàn)的太多，通常做圓角矩形時(shí)圓角的半徑并不會(huì)設(shè)置太大，因此即使整個(gè)區(qū)域作為矩形來響應(yīng)事件也沒問題，特意去為這個(gè)計(jì)算坐標(biāo)反而得不償失。這個(gè)效果我暫時(shí)也用不到就不做演示了，總之這個(gè)BUG在Chrome上遲早會(huì)得到修復(fù)的，只要解決眼下的問題即可。

測(cè)試于：Chrome 31.0.1650.57 m

本文名稱：Chrome設(shè)置radius時(shí)的事件響應(yīng)問題
URL地址：http://muchs.cn/news47/315997.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)