点击除固定内容关闭页面

76 阅读1分钟

一、首先要有一个遮罩层,以及你的所需内容

<div className="cover-container">
  <div className="content">
  12345
  </div>
</div>

二、需要设定遮罩层覆盖页面全范围

.cover-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.content{
//需要多大写多大
}

三、功能实现 监听 'click'事件

	onKeyDown = (e) => {
		e.stopPropagation();
		const cover = document.getElementsByClassName("content")[0];
		if (cover && !cover.contains(e.target)) {
			this.onClose();//关闭页面功能
		}
	};
        componentDidMount() {
	   setTimeout(() => document.addEventListener("click", this.onKeyDown), 0);
	}

	componentWillUnmount() {
	  document.removeEventListener("click", this.onKeyDown);
	}