Js

  • 给整个document添加监听点击事件，隐藏div
  • 给div添加监听点击事件，阻止冒泡

HTML代码：

1
2
3
4
<div class="box">
    <button class="Nav">导肮展开栏</button>
    <div class="menu">菜单</div>
</div>

Js代码：

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
   var nav = document.getElementsByClassName('Nav')
   var menu = document.getElementsByClassName('menu')

   // 点击body触发函数
       document.onclick = function(){
       menu[0].style.display = 'none'
   }

// 阻止冒泡，即阻止触发点击事件
   nav[0].addEventListener('click', function(e){
       stopMaoPao(e)
       menu[0].style.display = "block";
   } , false)

   // 阻止菜单冒泡事件
   menu[0].addEventListener('click' , function(e){
       stopMaoPao(e)
   }, false)


   // 阻止事件向上传递，事件冒泡
   // cancelBubble:设置或获取当前事件是否要在事件句柄中向上冒泡
   // stopPropagation符合w3c标准，是应用于firefox浏览器，而不支持IE浏览器
   // 而cancelBubble则相反，不符合w3c标准，只支持ＩＥ浏览器。
   function stopMaoPao(e) { 
       e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
   }

Js小提示

  • 使用addEventListener要注意
  • getElementsByClassName getElementByTagName()获取到的都是数组，即使满足条件的元素只有一个，也是数组， 因此在事件监听时，必须加[0]，否则会报错误
  • getElementById就不需要加[0]
  • addEventListener 第三个参数默认是false，false为冒泡事件，true为捕获事件

实现效果

  • 图坏了- -，以后再补一个吧

完整代码

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
<div class="box">
    <button class="Nav">导肮展开栏</button>
    <div class="menu">菜单</div>
</div>

<script>
    var nav = document.getElementsByClassName('Nav')
    var menu = document.getElementsByClassName('menu')

    // 点击body触发函数
        document.onclick = function(){
        menu[0].style.display = 'none'
    }
    // 使用addEventListener要注意，
    // getElementsByClassName getElementByTagName()获取到的都是数组，即使满足条件的元素只有一个，也是数组
    // 因此在事件监听时，必须加[0]，否则会报错误
    // getElementById就不需要加[0]
    // addEventListener 第三个参数默认是 false false为冒泡事件 true为捕获事件
    nav[0].addEventListener('click', function(e){
        // 阻止冒泡，即阻止触发点击事件
        stopMaoPao(e)
        menu[0].style.display = "block";
    } , false)

    // 阻止菜单冒泡事件
    menu[0].addEventListener('click' , function(e){
        stopMaoPao(e)
    }, false)


    // 阻止事件向上传递，事件冒泡
    // cancelBubble:设置或获取当前事件是否要在事件句柄中向上冒泡
    // stopPropagation符合w3c标准，是应用于firefox浏览器，而不支持IE浏览器
    // 而cancelBubble则相反，不符合w3c标准，只支持ＩＥ浏览器。
    function stopMaoPao(e) { 
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }
</script>

<style>
    .box {
        width: 500px;
        height: 500px;
        border: 1px solid #000000;
        position: relative;
    
    }
    
    .Nav {
        width: 100px;
        height: 50px;
        background: #a6a6e3;
        position: absolute;
        top: 0;
        left: 0;
    }

    .menu{
        width: 300px;
        height: 350px;
        background: #cbd9dc;
        border: 1px solid #000000;
        position: absolute;
        top: 100px;
        left: 0;
        display: none;
    }
</style>

最好是采用一个透明的遮罩层进行点击事件从而达到隐藏。

为什么不采用监听body的监听事件呢，一方面是因为可能会发生点击事故，就是不小心点到其他a标签、跳转标签或者事件触发元素，会直接触发其他函数或者跳转页面；另一方面是因为可维护性不好，假设可以通过点击多个元素关闭，那么需要挨个判断id。

Vue

  • 使用Vue来处理相比Js会灵活很多
  • 可以在盒子外层加一层固定的遮罩层进行点击事件从而达到隐藏。

实现代码：

1
2
3
4
5
<div class="nav">
  <!-- 采用一个透明的遮罩层进行点击事件从而达到隐藏 -->
  <div v-show="navPhoneOpen" id="menu-mask" @click="hideNav()"></div>
  <NavPhone></NavPhone>
</div>
  • 使用v-show给遮罩层设定展示条件，当盒子处于显示时，遮罩层也一起显示，z-index大于body小于盒子即可，点击遮罩层即可触发hideNav()事件，可以利用vuex定义一个变量用来控制盒子的隐藏和出现
  • 或者不定义也行，在data()里面定义也可以，方法有很多，反正用一个变量通过v-show来控制盒子的隐藏和显示就行了。
  • hideNav()函数就是更改那个控制盒子显示的变量