点击空白处 关闭气泡的问题

经常碰到这样的问题。可能会走偏。

正确的做法其实就是在window的mouseup中书写事件。而且该事件必须是setTimeout中。 

以下是vue的demo

<template>
    <div>
         <ul id="nav">
             <li v-for="(item,index) in items" @click="showNav($event,index)">
                 {{item.title}}
                <ul v-if="currentIndex === index" >
                    <li v-for="c in item.children" @click="go">{{ c }}</li>
                </ul>
             </li>
         </ul>
    </div>
</template>

<script>
    export default {
        data () {            
            return {
                 items : [
                     {title:"首页"},
                     {title:"渠道质量",children:["渠道质量1","渠道质量2"]},
                     {title:"渠道结算"},
                 ],
                 currentIndex : -1
            }
        },
        methods:{
             showNav (el,index) {
                 this.currentIndex = index;
             },
             go () {
                 window.open("http://www.baidu.com");
             }
        },
        created () {
            var self = this;
            window.addEventListener("mouseup",function(){
                    if(self.currentIndex != -1) {
                        setTimeout(() => {
                            self.currentIndex = -1},
                        0)                            
                    }
            })
        } 
    }
</script>

 2、其实有更简单的思路

// 点击屏幕任何角落，隐藏$ul 

$(document).on("click", function(e){ $ul.hide(); });

上面可能需要扩展：监听e.target的内容来做逻辑

 

转载于:https://www.cnblogs.com/CyLee/p/5981489.html