vue&javascript点击空白处隐藏内容

最新推荐文章于 2023-08-04 10:56:12 发布

星星_之火

最新推荐文章于 2023-08-04 10:56:12 发布

阅读量432

点赞数

文章标签： javascript vue.js java

本文链接：https://blog.csdn.net/qq_41585169/article/details/131376424

版权

vue：

1.创建一个按钮和容器，按钮控制显示和隐藏，容器存放内容

<div @click.stop="isShow = true">显示</div>
<div v-show="isShow" v-clickoutside="handleClose">
    ...//代码
</div>

2.编写自定义指令

<script>
    const clickoutside = {   // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {},
        unbind(el, binding) { // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__);
            delete el.__vueClickOutside__;
        },
    };

    export default {
        directives: { clickoutside },
        data() {
            return {
                isShow:false,
            }
        },
        methods:{
            handleClose(){
                this.isShow = false;
            }
        }
    }
</script>

javascript：

点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏（阻止事件的冒泡，原生js）

<body>
    <!-- 点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏 -->
    <button>点击</button>
    <div class="box">展示的内容</div>
</body>
<style>
      .box{
          width: 100px;
          height: 100px;
          background-color: skyblue;
          display: none;
      }  
</style>

<script>
    var btn = document.getElementsByTagName('button')[0]
    var box = document.getElementsByClassName('box')[0]

    // 因为事件有默认冒泡行为，当点击btn的时候，事件会冒泡到document上，
     所以只会隐藏，不会显示了        所以要阻止btn的冒泡行为
    // 如果要处理浏览器的兼容问题的话，封装一个函数阻止冒泡行为
    function stopP(ev){
        if(ev.stopPropagation){
            ev.stopPropagation() //标准浏览器
        }else{
            ev.cancelBubble = true //IE8及以下
        }
    }
    btn.onclick=function(ev){
        box.style.display = 'block'
        var ev = ev||event   //事件对象（IE和谷歌：是全局的event对象;火狐：是事件函数的第一个参数）
        stopP(ev)
    }
    document.onclick=function(ev){
       box.style.display = 'none'
    }
</script>