如何利用contains方法实现点击界面空白部分关闭当前面板的效果-js教程-PHP中文网

今天给组件添加一个小功能，需要点击界面空白部分关闭当前组件，找了好一会儿，发现主要是jquery的方法，js原生几乎没有，崩溃。。好不容易弄出来了，就给自己做个笔记吧，ps：我用的react

要用到的方法：

1.contains：就是判断某个元素是不是选定元素的子元素（或本身）；

2.window.event.target：返回事件的目标节点，比如你点击了某个

，它就返回这个h1；（万恶的ie不支持）

3.addEventListener：事件监听，示例，document.body.addEventListener('click',function(){ });

4.ref，这个是react提供的选择真实dom元素的方法，和js原生的document.document.getelementby...系列作用一样

示例：

  ref={(r) => {
    this.pElem = r;
  }}
>

上面是es6的用法，es5（不推荐）看这里

通义灵码
阿里云出品的一款基于通义大模型的智能编码辅助工具，提供代码智能生成、研发智能问答能力

下载

废话说完，上图上代码：

效果图：

代码：
import React, { Component } from 'react'; import './index.less'; class CloseTheDomByClickBlankArea extends Component { state = { openCurrentArea: true, }; componentDidMount() { // 点击blank_area区域，关闭current_area面板 this.blankAreaElem.addEventListener('click', 　 this.handleClickCloseCurrentArea.bind(this)); } handleClickCloseCurrentArea() { // 当界面上渲染出内部面板时，可执行如下操作（若无此判断条件，点击打开面板按钮区域，　　　就会先触发如下操作，再触发handleClickOpenCurrentArea函数） if (document.body.contains(this.currentAreaElem)) { // 点击面板以外的部分（灰色区域以内，面板区域以外），就关闭面板 if (this.blankAreaElem.contains(window.event.target) 　　　　　&& !this.currentAreaElem.contains(window.event.target) 　　　 ) { this.setState({ openCurrentArea: false, }) } } } // 点击"打开面板"按钮，打开面板 handleClickOpenCurrentArea() { this.setState({ openCurrentArea: true, }) } render() { return (
{ this.blankAreaElem = r; }} > 　　　 {/* 打开面板按钮 */}
打开面板
　　　
　　　 {/* 要关闭或开启的面板current_area */}
{ this.state.openCurrentArea &&
{ this.currentAreaElem = r; }} >
点击旁边灰色区域关闭当前面板

}
); } } export default CloseTheDomByClickBlankArea;