摘要：就是說(shuō)，當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。所以在和移動(dòng)我分別用了兩種方案，傳統(tǒng)布局實(shí)現(xiàn)，彈性盒實(shí)現(xiàn)。前者是控制彈性盒的內(nèi)容垂直方向居中，后者控制內(nèi)容水平方向居中。

之前寫(xiě)過(guò)兩篇開(kāi)發(fā)中遇到的問(wèn)題和解決方案。當(dāng)時(shí)是CSS 和 JavaScript 分開(kāi)寫(xiě)的?，F(xiàn)在寫(xiě)這篇文章的時(shí)候感覺(jué)很多內(nèi)容都是有內(nèi)在聯(lián)系的，所以不好分開(kāi)。

給大家分享一下這半年來(lái)的感受吧：

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

所以有很多知識(shí)點(diǎn)自己確實(shí)在書(shū)上都看到過(guò)但是在平時(shí)遇到問(wèn)題的時(shí)候卻不知道怎么去用或者說(shuō)想到去用，有時(shí)候會(huì)有同事給一下指導(dǎo)說(shuō)用什么解決問(wèn)題。關(guān)鍵時(shí)候還是多看（看書(shū)，看別人的代碼）和多用。

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

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

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

先看一段html 代碼：

掃描二維碼1
            

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

按照我的思路代碼應(yīng)該是下面的這個(gè)樣子的

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

上面的代碼，按照正常的思路應(yīng)該是沒(méi)有問(wèn)題的，但是，在實(shí)際的運(yùn)行過(guò)程中卻發(fā)生了問(wèn)題。瀏覽器的報(bào)錯(cuò)信息如下：

這是因?yàn)槎褩Ｒ绯龅膯?wèn)題。那么為什么會(huì)出現(xiàn)這樣的問(wèn)題呢？我把斷點(diǎn)打在了以下的位置，然后點(diǎn)擊子元素

發(fā)生的情況是：代碼無(wú)限次的觸發(fā)$(".qr-btn").bind(...) ,就出現(xiàn)了上面的報(bào)錯(cuò)信息。那么是什么原因?qū)е碌哪兀?br>思考一下發(fā)現(xiàn)：是因?yàn)槭录芭莸膯?wèn)題。我單擊父元素觸發(fā)子元素的 click 事件，子元素的 click 事件又冒泡到父元素上，觸發(fā)父元素的 click 事件，然后父元素再次觸發(fā)了子元素的 click 事件，這就造成了事件的循環(huán)。

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

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

經(jīng)過(guò)我的測(cè)試，代碼是能夠正常的運(yùn)行的。

那么我們有沒(méi)有更好的方法來(lái)解決上面的問(wèn)題呢？請(qǐng)看接下來(lái)的內(nèi)容

先來(lái)看 lable 標(biāo)簽的定義:

 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

label 元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

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

  Male
 
 
  Female
 

效果如下圖：

到這里應(yīng)該之道我們?cè)撛趺锤倪M(jìn)我們的代碼了，

掃描二維碼1
            

除了 lable 標(biāo)簽的樣式我們自己需要自己定義外，還有兩個(gè)優(yōu)點(diǎn)：

減少了 JavaScript 的書(shū)寫(xiě)；

lable 標(biāo)簽和 input 標(biāo)簽沒(méi)有必要是包含關(guān)系

最近做了一個(gè)抽獎(jiǎng)的活動(dòng)，其中就有一個(gè)輪盤(pán)的旋轉(zhuǎn)的動(dòng)畫(huà)效果（注意啦，中間的那個(gè)卡頓是 gif 圖片又重新開(kāi)始播放了）。，效果如下圖：

關(guān)于動(dòng)畫(huà)實(shí)現(xiàn)在下一篇文章中會(huì)繼續(xù)介紹，這里主要來(lái)關(guān)注下布局的問(wèn)題。因?yàn)槲覀冺?yè)面會(huì)在 pc 和移動(dòng)移動(dòng)各出一套。所以在 pc 和移動(dòng)我分別用了兩種方案，pc 傳統(tǒng)布局實(shí)現(xiàn)，h5 "彈性盒"實(shí)現(xiàn)。

外圍的那些燈是使用絕對(duì)定位來(lái)做的，就不過(guò)過(guò)多的介紹，主要的是看中間的獎(jiǎng)品九宮格的部分。html 代碼如下：

        

                

                    
mac pro
                    
掃地機(jī)器人
                    
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 代碼可以看出來(lái)我僅僅是在水平方向上使用了“彈性盒”,而在豎直的方向上，還是使用了固定高度（因?yàn)槲沂怯玫?rem 單位，這里的固定也是不準(zhǔn)確的，高度會(huì)根據(jù) fontsize 值進(jìn)行計(jì)算。）

那么可不可以在豎直和水平都是用“彈性盒”呢？
來(lái)看一下下面的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;
}

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

詳細(xì)代碼如下：

.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 端的實(shí)現(xiàn)是傳統(tǒng)的浮動(dòng)方式.我的 HTML 代碼如下：

                            

                                
mac pro
                                
祝福紅包
                                
 iphone 6s
                            
                            

                                
優(yōu)惠券
                                

                                
20積分
                            
                            

                                
掃地機(jī)器人
                                
猴年限定
                                    
公仔
                                
                                
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 代碼對(duì)比看我們可以顯然看出傳統(tǒng)的浮動(dòng)方式的布局和“彈性盒”布局的一些優(yōu)缺點(diǎn)：

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

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

“彈性盒”為多屏幕的適配提供了便利性。我不用去關(guān)心子元素的寬度和高度是多少，或者是屏幕的寬度是多少，都會(huì)根據(jù)實(shí)際請(qǐng)款flex自身會(huì)去適配。

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

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

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

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

在做“跑馬燈”插件的時(shí)候遇到了一個(gè)問(wèn)題，就是用戶(hù)點(diǎn)擊開(kāi)始抽獎(jiǎng)按鈕以后在還沒(méi)有返回結(jié)果的時(shí)候用戶(hù)又第二次點(diǎn)擊抽獎(jiǎng)按鈕，那個(gè)時(shí)候機(jī)會(huì)出現(xiàn)“奇葩”的問(wèn)題。比如說(shuō)：第一次請(qǐng)求和第二次請(qǐng)求重合返回的結(jié)果顯示哪一個(gè)，就算允許用戶(hù)進(jìn)行二次抽獎(jiǎng)，交互也不友好。而且如果前端頁(yè)面不做限制的話(huà)，顯示也會(huì)出現(xiàn)奇葩的問(wèn)題。比如下面這樣：

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

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

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

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

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

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

這次的分享就到這里，下一次會(huì)分享“輪盤(pán)”抽獎(jiǎng)效果的 JavaScript 開(kāi)發(fā)過(guò)程。