js点击指定范围之外触发的方法

js点击指定范围之外触发的方法

1.原生js

需求：鼠标点击一个按钮会弹出一个弹框，当点击页面除弹框以外的其他地方时，关闭弹框。

//监听页面点击事件
$(document).bind("click",function(e){
　　　　//#menu是弹框的id，#btn是按钮的id 
　　　　if($(e.target).closest("#menu").length == 0 && $(e.target).closest("#btn").length == 0){
　　　　		//点击id为menu且id为btn之外的地方，关闭#menu弹框
　　　　		$("#menu").hide()
　　　　}
　　})

2.vue项目

方法一

mounted(){
   window.addEventListener('click',this.listenerChangeFlag)
},
beforeDestroy () {
   window.removeEventListener('click',this.listenerChangeFlag)
},
methods: {
	listenerChangeFlag(e){
    	let nowClassName = e.target.className
		if(nowClassName != 'login_left_module' && nowClassName != 'login_left_yuan' ){
			//点击类名为 login_left_module 和 login_left_yuan 之外的地方，隐藏弹框
			
		}
	},
}

方法二：点击弹窗之外

// 点击弹窗之外的地方，关闭弹窗
// 子组件弹窗
<template>
    <div class="keyboard-wrap" v-if="kbShow" @click.stop>
        弹窗里面的内容
    </div>
</template>
 
 
mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
}，
data() {
	return {
		isShow:true
	};
},
 
methods： {
    bodyCloseMenus() {
      if (this.kbShow == true) {
        this.kbShow =false;
      }
    },
}，
 
//  最后记得销毁
 
beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
},

方法三：自定义指令

新建clickOutside.js文件

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

在页面引入

<template>
  <div class=''>
    <div class="mainCon">
      <el-button @click.stop="isShow = !isShow">{{ isShow ? '隐藏弹框':'显示弹框' }}</el-button>
      <div class="mainList" v-if="isShow" v-click-outside="()=>clickOutFunction()">
        <p>点该弹框之外，弹框消失</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
        <p>测试一下</p>
      </div>
    </div>
  </div>
</template>
<script>
import clickOutside from '@/utils/clickOutside'
export default {
  name:'clickOutSide',
  components: {},
  directives:{clickOutside},
  props:[],
  data() {
    return {
      isShow:true
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
  },
  methods: {
    clickOutFunction(){
      if (this.isShow == true) {
        this.isShow =false;
      }
    }

  }
};
</script>
<style lang='scss' scoped>
.mainList{
  background: #eee;
  border-radius: 20px;
  width: 50%;
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
}
</style>