前端開發日記之點選懸浮框之外的地方隱藏懸浮框
阿新 • • 發佈:2019-01-01
本次遇見的問題是:在拒絕訂單時,頁面彈出了一個懸浮框用於輸入拒絕理由。需要我做的是:彈出懸浮框時,點選頁面其它位置時會將懸浮框隱藏。
在此處貼出程式碼:
//拒絕彈出框在點選彈出框其它位置時,隱藏彈出框 $(document).on('click',function(e){ if($('.reason').css('display')=="none")//reason為彈出框的className,為減少客服端壓力,如果原來就是隱藏的直接返回 return; var e = e || window.event; //瀏覽器相容性 ,IE為window.event var elem = e.target || e.srcElement; //IE為e.srcElement if(elem.className=='ref')//ref為頁面中的拒絕按鈕,點選拒絕按鈕時會彈出懸浮框;如果點選的ref就直接返回,不然懸浮框就永遠彈不出來 return; while (elem) { //迴圈判斷至跟節點,防止點選的是div子元素 if (elem.className && elem.className=='reason') { return; } elem = elem.parentNode; } $('.reason').css('display','none'); //點選的不是div或其子元素 });