摘要：就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案，傳統(tǒng)布局實現，彈性盒實現。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。

之前寫過兩篇開發(fā)中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的，所以不好分開。

給大家分享一下這半年來的感受吧：

知道和理解之間是有很大距離的。別人談到一個知識點，能接上嘴并且能發(fā)表一下自己的意見，這叫知道。遇到問題能夠想到用什么知識點解決問題，這叫理解。

所以有很多知識點自己確實在書上都看到過但是在平時遇到問題的時候卻不知道怎么去用或者說想到去用，有時候會有同事給一下指導說用什么解決問題。關鍵時候還是多看（看書，看別人的代碼）和多用。

display:none 關閉一個元素的顯示（對布局沒有影響）；其所有后代元素都也被會被關閉顯示。文檔渲染時，該元素如同不存在。（不會顯示在文檔流中的位置，但是 DOM 節(jié)點仍會出現在文檔流中）
visibility:hidden visibility屬性讓你能夠控制一個圖形元素的可見性,但是仍會占用顯示時候在文檔流中的位置。

使用 display:none 的時候雖然元素不會顯示，但是DOM 節(jié)點仍會出現，所以我們就可以使用選擇器對該元素進行操作。如下圖中的示例：

這個問題是發(fā)生在自己上篇文章《h5端呼起攝像頭掃描二維碼并解析》中的。詳細的代碼可以看那篇文章。

先看一段html 代碼：

掃描二維碼1
            

之前我的想法是這個樣子的：
1.我先觸發(fā)qr-btn的 click 事件，在回調中觸發(fā) input 的 click 事件click 事件
2.然后觸發(fā) input 的 change 事件,獲取上傳圖片的信息。

按照我的思路代碼應該是下面的這個樣子的

//點擊父級元素的事件
    $(".qr-btn").bind("click",function(){
        //觸發(fā)子元素的事件
        $("[node-type=jsbridge]").trigger("click");
    });
    $("[node-type=jsbridge]").bind("change",function(){
        //做一些事情
    });

上面的代碼，按照正常的思路應該是沒有問題的，但是，在實際的運行過程中卻發(fā)生了問題。瀏覽器的報錯信息如下：

這是因為堆棧溢出的問題。那么為什么會出現這樣的問題呢？我把斷點打在了以下的位置，然后點擊子元素

發(fā)生的情況是：代碼無限次的觸發(fā)$(".qr-btn").bind(...) ,就出現了上面的報錯信息。那么是什么原因導致的呢？
思考一下發(fā)現：是因為事件冒泡的問題。我單擊父元素觸發(fā)子元素的 click 事件，子元素的 click 事件又冒泡到父元素上，觸發(fā)父元素的 click 事件，然后父元素再次觸發(fā)了子元素的 click 事件，這就造成了事件的循環(huán)。

嘗試阻止事件的冒泡，看能夠解決問題？
那我們嘗試在觸發(fā)子元素的click的時候，嘗試組織子元素的冒泡，看能否解決我的問題？添加如下的代碼：

        $("[node-type=jsbridge]").bind("click",function(e){
            // console.log(e.type);
            e.stopPropagation();
        });

經過我的測試，代碼是能夠正常的運行的。

那么我們有沒有更好的方法來解決上面的問題呢？請看接下來的內容

先來看 lable 標簽的定義:

 標簽為 input 元素定義標注（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
標簽的 for 屬性應當與相關元素的 id 屬性相同。

看想一下 w3school 的示例代碼和效果：

  Male
 
 
  Female
 

效果如下圖：

到這里應該之道我們該怎么改進我們的代碼了，

掃描二維碼1
            

除了 lable 標簽的樣式我們自己需要自己定義外，還有兩個優(yōu)點：

減少了 JavaScript 的書寫；

lable 標簽和 input 標簽沒有必要是包含關系

最近做了一個抽獎的活動，其中就有一個輪盤的旋轉的動畫效果（注意啦，中間的那個卡頓是 gif 圖片又重新開始播放了）。，效果如下圖：

關于動畫實現在下一篇文章中會繼續(xù)介紹，這里主要來關注下布局的問題。因為我們頁面會在 pc 和移動移動各出一套。所以在 pc 和移動我分別用了兩種方案，pc 傳統(tǒng)布局實現，h5 "彈性盒"實現。

外圍的那些燈是使用絕對定位來做的，就不過過多的介紹，主要的是看中間的獎品九宮格的部分。html 代碼如下：

        

                

                    
mac pro
                    
掃地機器人
                    
iphone6s
                
                

                    
20積分
                    

                    
優(yōu)惠券
                
                

                    
ps4
                    

                        
猴年限定
公仔
                    
祝福紅包
                
                

            

css代碼如下：

.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    color: #ffdece;
    font-size: 1.8rem;
}

.row-a,
.row-b,
.row-c {
    height: 5.3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
}

由上面的 css 代碼可以看出來我僅僅是在水平方向上使用了“彈性盒”,而在豎直的方向上，還是使用了固定高度（因為我是用的 rem 單位，這里的固定也是不準確的，高度會根據 fontsize 值進行計算。）

那么可不可以在豎直和水平都是用“彈性盒”呢？
來看一下下面的css代碼：

.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffdece;
    font-size: 1.8rem;
}

.row-a,
.row-b,
.row-c {
    /*height: 5.3rem;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
    /*position: relative;*/
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

周末的時候關于這個布局自己又翻書看了下“彈性盒”的文檔，終于實現了在豎直和垂直方向上都實現內容的水平垂直居中內部元素。其實上面的代碼只需要把內容的父級元素再次定義為display:flex 再添加兩個屬性 justify-content和align-items就可以了。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。

詳細代碼如下：

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

與 h5 端相比，我在 pc 端的實現是傳統(tǒng)的浮動方式.我的 HTML 代碼如下：

                            

                                
mac pro
                                
祝福紅包
                                
 iphone 6s
                            
                            

                                
優(yōu)惠券
                                

                                
20積分
                            
                            

                                
掃地機器人
                                
猴年限定
                                    
公仔
                                
                                
ps4
                            
                            

                        

css 代碼如下：

.re-middle {
    background-color: #f89f71;
    width: 530px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.row-a,
.row-b,
.row-c {
    /*height: 106px;*/
    font-size: 0;
    overflow: hidden;
}

.row-a > div,
.row-c > div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
}

.row-b div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
    line-height: 106px;
    background-color: #f69f75;
}

由上面的 css 代碼對比看我們可以顯然看出傳統(tǒng)的浮動方式的布局和“彈性盒”布局的一些優(yōu)缺點：

float布局代碼簡潔，但是必須確定的指定盒子的寬度和高度，多屏幕的適配上會差一些（rem動態(tài)計算除外）。

“彈性盒”布局代碼使用新的 css3屬性，需要添加額外的廠商前綴，增加了代碼的復雜度(添加廠商前綴可以使用 sublime 插件，一鍵完成，推薦我的文章 前端開發(fā)工程師的 sublime 配置)

“彈性盒”為多屏幕的適配提供了便利性。我不用去關心子元素的寬度和高度是多少，或者是屏幕的寬度是多少，都會根據實際請款flex自身會去適配。

遇到的一個小問題，多行文本的處置居中：
這個九宮格內的文本元素，如果只是單行的話，只要使用 line-height 就可以解決問題，但是如果多行呢？會出什么情況呢，看下圖：

所以這里只能考慮不使用 line-height，使用 padding 來解決問題 ,嘗試padding后的效果。如下圖：

可以看到容器的下面多出了一部分。那也是我們使用的padding的問題，那么怎么解決這個問題呢？這就要用到之前提到過的box-sizing來解決問題。

.row-c-sec {
    color: #ffdece;
    font-size: 30px;
    padding-top: 17px;
    background-color: #f69f75;
    /*使容器的高=內容高度+padding +border*/
    box-sizing: border-box;
}

在做“跑馬燈”插件的時候遇到了一個問題，就是用戶點擊開始抽獎按鈕以后在還沒有返回結果的時候用戶又第二次點擊抽獎按鈕，那個時候機會出現“奇葩”的問題。比如說：第一次請求和第二次請求重合返回的結果顯示哪一個，就算允許用戶進行二次抽獎，交互也不友好。而且如果前端頁面不做限制的話，顯示也會出現奇葩的問題。比如下面這樣：

這樣是不是很糟糕啊。。。

那么我是怎么解決這個問題呢？
答案很簡單，我就是在點擊按鈕之后，使用絕對定位彈起了一個透明的彈層，將按鈕給覆蓋，等結果返回并顯示以后，我在同時去掉彈層。這樣就避免了用戶的重復提交。詳細看一下代碼：

.cover-layer{
    width:100%;
    height:100%;
    top:0;
    position:absolute;
    z-index:9999;
}

這里保證我的這個透明的彈層能夠覆蓋在抽獎按鈕的上面。當然這個class 是我通過JavaScript 動態(tài)的添加和刪除的。

$(node).on("clcik",".reward-btn",function(){
    //呼起彈層
    $("[node-type=cover_layer]",node).addClass("cover-layer");
    .....

    //返回結果以后去掉彈層
    $("[node-type=cover_layer]",node).removeClass("cover-layer");
    .....
});

這次的分享就到這里，下一次會分享“輪盤”抽獎效果的 JavaScript 開發(fā)過程。