知道和理解之间是有很大距离的。别人谈到一个知识点，能接上嘴并且能发表一下自己的意见，这叫知道。遇到问题能够想到用什么知识点解决问题，这叫理解。

display:none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。（不会显示在文档流中的位置，但是 DOM 节点仍会出现在文档流中） 

visibility:hidden visibility属性让你能够控制一个图形元素的可见性,但是仍会占用显示时候在文档流中的位置。

之前我的想法是这个样子的：

1.我先触发 qr-btn 的  click 事件，在回调中触发  input 的 click 事件 click 事件 

2.然后触发 input 的  change 事件,获取上传图片的信息。

发生的情况是： 代码无限次的触发 $('.qr-btn').bind(...)   ,就出现了上面的报错信息。那么是什么原因导致的呢？ 

思考一下发现： 是因为事件冒泡的问题。我单击父元素触发子元素的 click  事件，子元素的  click  事件又冒泡到父元素上，触发父元素的  click  事件，然后父元素再次触发了子元素的  click  事件，这就造成了事件的循环 。

尝试阻止事件的冒泡，看能够解决问题？

那我们尝试在触发子元素的 click 的时候，尝试组织子元素的冒泡，看能否解决我的问题？添加如下的代码：

</div>

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

1. <form> <label for="male">Male</label>
2. <input type="radio" name="sex" id="male" />
3. <br /> <label for="female">Female</label>
4. <input type="radio" name="sex" id="female" />
5. </form>

效果如下图：

到这里应该之道我们该怎么改进我们的代码了，

1. <lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
2. <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
3. </lable>

除了 lable 标签的样式我们自己需要自己定义外，还有两个优点：

• 减少了 JavaScript 的书写；
• lable  标签和  input  标签没有必要是包含关系

4.“弹层盒”布局和普通盒模型布局的优缺点对比

最近做了一个抽奖的活动，其中就有一个轮盘的旋转的动画效果（注意啦，中间的那个卡顿是 gif 图片又重新开始播放了）。，效果如下图：

关于动画实现在下一篇文章中会继续介绍，这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案，pc 传统布局实现，h5 “弹性盒”实现。

1.弹性盒实现九宫格

外围的那些灯是使用绝对定位来做的，就不过过多的介绍，主要的是看中间的奖品九宫格的部分。html 代码如下：

1. <div class="re-middle">
2. <div class="row-a" node-type="row-a">
3. <div>mac pro</div>
4. <div>扫地机器人</div>
5. <div>iphone6s</div>
6. </div>
7. <div class="row-b" node-type="row-b">
8. <div>20积分</div>
9. <div></div>
10. <div>优惠券</div>
11. </div>
12. <div class="row-c" node-type="row-c">
13. <div>ps4</div>
14. <div>
15. <p>猴年限定</p>公仔</div>
16. <div>祝福红包</div>
17. </div>
18. <div node-type="reward-layer"></div>
19. </div>

css代码如下：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. color: #ffdece;
12. font-size: 1.8rem;
13. }
15. .row-a,
16. .row-b,
17. .row-c {
18. height: 5.3rem;
19. display: -webkit-box;
20. display: -webkit-flex;
21. display: -ms-flexbox;
22. display: flex;
23. -webkit-flex-flow: row nowrap;
24. -ms-flex-flow: row nowrap;
25. flex-flow: row nowrap;
26. }
28. .row-a div,
29. .row-b div,
30. .row-c div {
31. -webkit-box-flex: 1;
32. -webkit-flex: 1;
33. -ms-flex: 1;
34. flex: 1;
35. text-align: center;
36. line-height: 5.3rem;
37. background-color: #f69f75;
38. }

由上面的 css 代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上，还是使用了固定高度（因为我是用的 rem 单位，这里的固定也是不准确的，高度会根据 fontsize 值进行计算。）

那么可不可以在竖直和水平都是用“弹性盒”呢？来看一下下面的css代码：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. display: -webkit-box;
12. display: -webkit-flex;
13. display: -ms-flexbox;
14. display: flex;
15. -webkit-box-orient: vertical;
16. -webkit-box-direction: normal;
17. -webkit-flex-direction: column;
18. -ms-flex-direction: column;
19. flex-direction: column;
20. color: #ffdece;
21. font-size: 1.8rem;
22. }
24. .row-a,
25. .row-b,
26. .row-c {
27. /*height: 5.3rem;*/
28. -webkit-box-flex: 1;
29. -webkit-flex: 1;
30. -ms-flex: 1;
31. flex: 1;
32. display: -webkit-box;
33. display: -webkit-flex;
34. display: -ms-flexbox;
35. display: flex;
36. -webkit-flex-flow: row nowrap;
37. -ms-flex-flow: row nowrap;
38. flex-flow: row nowrap;
39. }
41. .row-a div,
42. .row-b div,
43. .row-c div {
44. -webkit-box-flex: 1;
45. -webkit-flex: 1;
46. -ms-flex: 1;
47. flex: 1;
48. text-align: center;
49. line-height: 5.3rem;
50. background-color: #f69f75;
51. /*position: relative;*/
52. -webkit-box-align:center;
53. -webkit-align-items:center;
54. -ms-flex-align:center;
55. align-items:center;
56. }

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档，终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。 其实上面的代码只需要把内容的父级元素再次定义为 display:flex 再添加两个属性 justify-content 和 align-items 就可以了。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。

详细代码如下：

1. .row-a div,
2. .row-b div,
3. .row-c div {
4. -webkit-box-flex: 1;
5. -webkit-flex: 1;
6. -ms-flex: 1;
7. flex: 1;
8. border: 1px solid #000;
9. -webkit-box-align: center;
10. -webkit-align-items: center;
11. -ms-flex-align: center;
12. align-items: center;
13. -webkit-box-pack: center;
14. -webkit-justify-content: center;
15. -ms-flex-pack: center;
16. justify-content: center;
17. display: -webkit-box;
18. display: -webkit-flex;
19. display: -ms-flexbox;
20. display: flex;
21. }

2.传统方式实现

与 h5 端相比，我在 pc 端的实现是传统的 浮动 方式.我的 HTML 代码如下：

2. <div class="re-middle">
3. <div class="row-a">
4. <div>mac pro</div>
5. <div class="row-a-sec">祝福红包</div>
6. <div class="row-a-last"> iphone 6s</div>
7. </div>
8. <div class="row-b clearfix">
9. <div>优惠券</div>
10. <div class="row-b-sec"></div>
11. <div class="row-b-last">20积分</div>
12. </div>
13. <div class="row-c">
14. <div>扫地机器人</div>
15. <div class="row-c-sec">猴年限定
16. <p>公仔</p>
17. </div>
18. <div class="row-c-last">ps4</div>
19. </div>
20. <div class="reward-btn"></div>
21. </div>

css 代码如下：

1. .re-middle {
2. background-color: #f89f71;
3. width: 530px;
4. height: 320px;
5. position: absolute;
6. top: 0;
7. right: 0;
8. bottom: 0;
9. left: 0;
10. margin: auto;
11. }
13. .row-a,
14. .row-b,
15. .row-c {
16. /*height: 106px;*/
17. font-size: 0;
18. overflow: hidden;
19. }
21. .row-a > div,
22. .row-c > div {
23. float: left;
24. width: 176px;
25. height: 106px;
26. text-align: center;
27. }
29. .row-b div {
30. float: left;
31. width: 176px;
32. height: 106px;
33. text-align: center;
34. line-height: 106px;
35. background-color: #f69f75;
36. }

由上面的 css 代码对比看我们可以显然看出传统的浮动方式的布局和“弹性盒”布局的一些优缺点：

• float 布局代码简洁，但是必须确定的指定盒子的宽度和高度，多屏幕的适配上会差一些（rem动态计算除外）。
• “弹性盒”布局代码使用新的 css3属性，需要添加额外的厂商前缀，增加了代码的复杂度(添加厂商前缀可以使用 sublime 插件，一键完成，推荐我的文章  前端开发工程师的 sublime 配置 )
• “弹性盒”为多屏幕的适配提供了便利性。我不用去关心子元素的宽度和高度是多少，或者是屏幕的宽度是多少，都会根据实际请款 flex 自身会去适配。

所以这里只能考虑不使用 line-height ，使用 padding 来解决问题 ,尝试 padding 后的效果。如下图： 

可以看到容器的下面多出了一部分。那也是我们使用的 padding 的问题，那么怎么解决这个问题呢？这就要用到之前提到过的 box-sizing 来解决问题。

1. .row-c-sec {
2. color: #ffdece;
3. font-size: 30px;
4. padding-top: 17px;
5. background-color: #f69f75;
6. /*使容器的高=内容高度+padding +border*/
7. box-sizing: border-box;
8. }

5.按钮多次提交的解决方案

在做“跑马灯”插件的时候遇到了一个问题，就是用户点击开始抽奖按钮以后在还没有返回结果的时候用户又第二次点击抽奖按钮，那个时候机会出现“奇葩”的问题。比如说：第一次请求和第二次请求重合返回的结果显示哪一个，就算允许用户进行二次抽奖，交互也不友好。而且如果前端页面不做限制的话，显示也会出现奇葩的问题。比如下面这样：

这样是不是很糟糕啊。。。

那么我是怎么解决这个问题呢？答案很简单，我就是在点击按钮之后，使用绝对定位弹起了一个透明的弹层，将按钮给覆盖，等结果返回并显示以后，我在同时去掉弹层。这样就避免了用户的重复提交。详细看一下代码：

1. <div node-type="cover_layer"></div>

1. .cover-layer{
2. width:100%;
3. height:100%;
4. top:0;
5. position:absolute;
6. z-index:9999;
7. }

这里保证我的这个透明的弹层能够覆盖在抽奖按钮的上面。当然这个 class 是我通过 JavaScript 动态的添加和删除的。

1. $(node).on('clcik','.reward-btn',function(){
2. //呼起弹层
3. $('[node-type=cover_layer]',node).addClass('cover-layer');
4. .....
6. //返回结果以后去掉弹层
7. $('[node-type=cover_layer]',node).removeClass('cover-layer');
8. .....
9. });

这次的分享就到这里，下一次会分享“轮盘”抽奖效果的 JavaScript 开发过程。

</div>