js判斷滑鼠單擊或者雙擊事件「js雙擊事件參數」

大家好，我是前端菜鳥李不白，今天帶給大家的是js中，一個小小的點擊案例。

通過每個盒子的點擊去完成與用戶的交互。

那麼如何去做呢？

首先我們先寫一個div，給它一些樣式，方便我們觀察。

寫完之後效果如下圖。

接下來要做什麼呢？要做的是，在我們點擊這個高為200的盒子之後，讓它變成高為500的盒子。再次點擊之後，再讓它回到兩百。

怎麼做呢？看代碼。

首先先來一個script標籤。

再寫一行box.onclick=function（）{ }，這裡給盒子起的ID名可以直接拿過來用，而不用來一遍聲明。意思是，當我盒子點擊後，我需要做什麼？需要做的那個事的行為，就要放在中括弧里。

那麼我們要幹什麼事呢？讓這個盒子第一次點擊，由原來的高200，長高到500。第二次點擊由高500，減肥到原來的200。

這裡需要用到什麼？需要用到一個判斷語句。

if（）{ }else{ }

這行代碼如上圖所示，寫在function那個中括弧里。

那麼怎麼判斷呢？如果，我點擊之前高是200，那麼點擊之後它就發生改變。

box.style.height=「500px」；

發生點擊後，讓那個盒子的高度樣式改變，變成500。如果，我點擊之前它不是200，那麼點擊之後就要變成200。

這行代碼是在else的中括弧里，這樣寫。

box.style.height=「200px」；如圖。

到了這一步，按照以上寫完的代碼走，你會發現點擊沒反應。因為啥呢？因為我根本不知道原來的盒子是什麼樣子，我無法去做出判斷，執行我的改變。

那麼我們這裡要用到布爾值，因為我們只要最終的兩個結果，而布爾值就是兩個結果，一個ture，一個false。

我們需要添加這樣一行代碼。let libubai=true；

因為這個頁面每一次刷新出來高都是200，那麼我就可以用這行代碼，聲明一個變數。默認這個值是200。再把這個變數名，添加到if的小括弧里去。

然後你點擊的時候它會判斷，哦，這已經是二百了，那麼我要執行第一個方案，當它是200的時候，我要讓它變高，變成五百。如下圖。

這時候你會發現，再次點擊盒子是不變的，盒子沒有從500變成200。為什麼？雖然盒子變成500了，但是它沒有感受到盒子已經是500的這個條件。那麼我們需要添加一行代碼了，告訴它盒子是500了。

在box.style.height=「500」；這行代碼下面加一行代碼。

libubai=false。

因為最開始默認變數值是200。這裡我點擊一次改變了高度，所以變數值從原來的ture，變成了false。因為我們只有兩個高度，所以這個false代表了五百的高度。

也就是說我點擊了一次，高度變成了500，變數值也要跟上是500。同理，當我再次點擊的時候，判斷一次這個盒子，它是200嗎？如果是，就變500。很顯然它不是，那麼執行第二套方案，它是500嗎？是，那就變成200。

好了，這裡我變了，那個變數值要不要跟上？當然要跟上。已經變成了200,那麼200又是默認值，默認值為ture。所以，在else里的box.style.height=「200px」；的下一行這麼寫。

libubai=true。

以上就是這個小案例的所有思路和步驟，可能解說不是那麼完美，我會努力完善自己的。

然後我個人理解，這個if和else中括弧里的這兩行代碼libubai=ture，libubai=false，作用是啥呢？

好有一比，這個判斷語句是個盲人，看不到外形，只能通過語言了解狀態。好了，我外形改變了，你卻看不到我的帥，那怎麼可以啊？我當然要親口告訴你了，我很帥，然後你才知道我很帥嘛！hiahiahia。

好了，這期內容到此結束，我們下期見，拜拜！！！

PS：請自動忽略倒數第二第三自然段……