深入理解事件传播机制（购物分类案例5）

item

描述
效果图11
利用事件传播机制，离开父元素到子元素，父元素不消失（使得鼠标在box上时，显示mark，而在mark时box也不消失）
注意问题

  • [x] 作用空间问题（耗费好几个小时）

    1
    2
    3
    4
    5
    for (var i = 0; i < boxList.length; i++) {
            boxList[i].onmouseenter = function(e) {           
                 e.target.firstElementChild.style.display="block";
                 //此处e.target代替boxList[i]，因为function访问不到i，以至出错Cannot read property 这类错误
        }

  • [ ] 事件传播注意布局

    1
    2
    3
    4
    5
    6
    <div id="box1" class="box">1
           <div class="mark">1</div>
            </div>
    <div class="box">2
            <div class="mark">2</div>
    </div>

  • [ ] .box的子元素.mark【选择器.box .mark写成.mark的话无法修改.box继承而来的order属性】

    1
    2
    3
    4
    5
    6
    .box .mark {
           border-bottom-left-radius:1%;       
           border-bottom-right-radius:1%;
           border-top-left-radius:1%;       
           border-top-right-radius:1%;
       }

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    #box {
        margin-top: 20px;
        margin-left: 20px;
        width: 200px;
        height: 500px;
        box-shadow: 0px 0px 10px #888888; 
        border-radius:5%;       
    }    
    .box {
        width: 200px;
        height: 50px;
        background-color: #8B4726;
        line-height: 50px;
        text-align: center;
    }
    div:nth-child(1){
        border-top-left-radius:5%;       
        border-top-right-radius:5%;
    }
    div:nth-child(10){
        border-bottom-left-radius:5%;       
        border-bottom-right-radius:5%;
    }
    
    .box:hover {
        background-color: #F0F0F0;
    }
    
    /*如果选择器写成.mark的话就不能修改继承过来的border-radius属性*/
    .box .mark {
        display: none;
        position: absolute;
        width: 500px;
        height: 500px;
        top: 20px;
        left: 220px;
        box-shadow: 0px 0px 10px #888888;
        text-align:left;
        border-bottom-left-radius:1%;       
        border-bottom-right-radius:1%;
        border-top-left-radius:1%;       
        border-top-right-radius:1%;
    }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1" class="box">1
            <div class="mark">1</div>
        </div>
        <div class="box">2
            <div class="mark">2</div>
        </div>
        <div class="box">3
            <div class="mark">3</div>
        </div>
        <div class="box">4
            <div class="mark">4</div>
        </div>
        <div class="box">5
            <div  class="mark">5</div>
        </div>
        <div class="box">6
            <div  class="mark">6</div>
        </div>
        <div class="box">7
            <div  class="mark">7</div>
        </div>
        <div class="box">8
            <div  class="mark">8</div>
        </div>
        <div class="box">9
            <div  class="mark">9</div>
        </div>
        <div class="box">10
            <div  class="mark">10</div>
        </div>
    </div>
    <script type="text/javascript">
    var boxList = document.getElementsByClassName('box');
    var markList = document.getElementsByClassName("mark");
    var box = document.getElementById('box1');
    
    for (var i = 0; i < boxList.length; i++) {
        boxList[i].onmouseenter = function(e) {           
        e.target.firstElementChild.style.display="block";//e.target代替boxList[i]，因为function访问不到i，以至出错Cannot read property 这类错误
    }    
    // 有没有都可以
        boxList[i].onmouseleave = function(e) {
            for(var  i = 0; i < markList.length; i++ ) {
                e.target.firstElementChild.style.display="none";                    
            } 
        }          
    }
    </script>
</body>
</html>