最近做的一個項目,按鈕使用的是a標簽做的,樣子還不錯。不過正是這個a標簽把我坑死了,有一個場景是點擊a標簽去調后台服務,為了防止用戶頻繁點擊按鈕提交,在去請求后台服務的時候肯定要先把按鈕的事件給禁止掉,后台服務回來之后,要把按鈕變成可以點擊的狀態。button有一個disabled屬性可以禁止按鈕的點擊,但是a標簽並沒有這個屬性,disabled對它沒有用。當時想了許久都不知道怎么去處理這個東西,想過把a標簽換成button,但是一想到要找UI修改demo就不去了,順便增加一下自己這方面的知識。下面寫一下LZ面對這一小問題的尷尬經歷。
找了許久的資料,發現都沒有很好的方法符合自己的要求,想到one、off、remove,但是然並卵,去掉之后事件就回復不來了,真是尷尬。原本自信滿滿的一下子覺的真艱難,后面又去看了看jquery的api有沒有符合的,發現也是木有。LZ暫時就在一些只要點擊一次的事件使用了one或remove,但是轉念一想不對呀,要是服務報錯了,用戶就點擊不了,這要把用戶坑了,把用戶坑了就是把自己坑了。這不相當給自己挖一個坑,自己跳下去呀,LZ肯定不能干着事情呀。LZ馬上覺的還是去一趟WC比較靠譜,放松放松一下腦子。
回來之后,果然腦子好使了,聯想到自己處理過多次彈框的問題(有多次相同的彈框,場景要求只能彈一次),發現與這個還有點類似,與馬上動手搞。先得有一個a標簽吧!
<a class="btn">我就要點多次,你能咋得</a>
要有事件吧!(LZ內心暗罵,擦,不要慫,就是干!)
var isOnclick=true;//默認可以點擊 $(".btn").on(click,function(){ if(isOnclick){ isOnclick=false;//不能點擊了 ajax{//不管成功與否都把isOnclick設置為true,即可點擊的狀態 。。。。。。。。。。。 isOnclick=true; } ) }
上面就是一個簡單的過程,不過實現了自己需要的東西。主要就是設置一個變量來判斷a標簽目前的狀態,說一下主要的流程:
1、首先定義一個變量isOnclick,默認為true.即一進去頁面默認a標簽為可點擊狀態。
2、當用戶點擊之,立即把isOnclick設置為false,這樣用戶多次點擊都不會重復執行。
3、當后台服務完成,把isOnclick設置為true,這樣a標簽又可以點擊了。
完成上面的流程后,a標簽肯定變成這樣了。哈哈,此時LZ的心情!!!
<a class="btn">大哥,我錯了。給點飯吃吧</a>
不過本着精益求精的原則,LZ突然想不能點擊的時候是不是得有點提示呀,不然用戶不知道,一直在那狂點,沒有撒作用。不得投訴LZ的代碼。肯定會一邊點着鼠標,一邊把口中暗罵,那個SB寫的代碼,完全沒有用嘛。此時LZ肯定會打了個噴嚏,是誰在想我???想想就覺的全身發抖。以上內容純屬LZ瞎逼逼的。吼吼吼,回到問題中來,不過為了讓用戶體驗更好,一般都會在按鈕點擊不了之后把按鈕置灰,這也相當與提醒用戶此時按鈕是不可點擊的。想到着LZ馬上找到UI,給我做一個置灰的按鈕唄。UI肯定也煩了,一下子這個,一下子那個。這么簡單的事情都不會(其實這也是LZ瞎想的,哈哈,想象力已經豐富到一個境界了)。其實也就設置了一個背景顏色,做為一個后端狗,LZ這點還是會的,寫一個bcakgruond-color嘛,lz數了數,加上-一共16個字母寫錯2個,正確率快到90%了呢。哈哈,正確的寫法是btn-color{ background-color: }。現在的a標簽已經變為這樣了。
<a class="btn">干嘛不給人家加一個好看的顏色,嗚嗚</a>
一想到a有樣式了,LZ又不爽了,我還是把你干趴下,不然人生艱難。馬上又寫了一段吊炸天的代碼(感覺LZ真辛酸,這就掉渣天了)。
$(".btn").on(click,function(){//默認a不帶顏色,可以點擊 if(!$(this).has("btn-color")){// $(".btn").addClass("btn-color");//顏色變暗,不可點擊 ajax{// 。。。。。。。。。。。 $(".btn").removeClass("btn-color");//又可以點擊了 } } }
發現這個簡單了一點,代碼控制的好了一點。不過lz還是決定把流程梳理一下,以防有跟我一樣的小伙伴遇到這種問題,為擴大我們的隊伍做貢獻(義正言辭呀)。主要思路是依靠一個樣式來判斷狀態,主要流程是:
1、先行一個樣式。樣式可以隨便啦!默認是沒有樣式的啦
2、在js中判斷有沒有這個樣式,有肯定不能讓它進后台了,所以使用了一個!。
3、沒有就是正常的按鈕,可以放它過去,有就不能讓它過去。
終於把事件解決了,好開心。不過lz也發現好像這個要是直接用瀏覽器修改一下類是不是也可以提交了。這個問題還沒有測試,不過相信lz90%的字母正確率的代碼是有用的(那來的自信,lz天生自信滿滿),后面測試一下在來考慮這個問題了。打掃戰場,總結經驗,以防止敵人擴大戰線(好嚴肅呀)。回歸正題,雖然這是一個很簡單的問題,但是也覺的能夠學習到東西,主要是以下幾點:
1、細節與體驗方面也是在寫代碼不可以錯過的地方。
2、思維方式不能固定,以為button有相應的屬性,a標簽也會有相關的屬性,思維定勢。多個角度思考問題。
3、小問題也要大思考。
lz自身不足:
1、經驗啦!
2、知識面啦!
一說不足就字少了,鄙視自己。哈哈,肯定有人問字母正確率這么低不是不足嗎???哈哈。
lz與a標簽的相遇就這樣結束啦,小伙伴有沒有更好的做法呢,lz需要集思廣益呢。有的話的請拿起手中的電話撥打以下號碼:88888888888