首页  >  文章  >  web前端  >  如何利用contains方法实现点击界面空白部分关闭当前面板的效果

如何利用contains方法实现点击界面空白部分关闭当前面板的效果

一个新手
一个新手原创
2017-10-17 09:36:132001浏览

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

要用到的方法:

1.contains:就是判断某个元素是不是选定元素的子元素(或本身);

2.window.event.target:返回事件的目标节点,比如你点击了某个4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a,它就返回这个h1;(万恶的ie不支持)

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

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

<strong>示例:<br/><p</strong><br/><strong>  ref={(r) => {</strong><br/><strong>    this.pElem = r;</strong><br/><strong>  }}</strong><br/><strong>></strong><br/><strong></p></strong>

上面是es6的用法,es5(不推荐)看这里

废话说完,上图上代码:

效果图:

代码:

import React, { Component } from &#39;react&#39;;
import &#39;./index.less&#39;;

class CloseTheDomByClickBlankArea extends Component {
  state = {
    openCurrentArea: true,
  };

  componentDidMount() {
    // 点击blank_area区域,关闭current_area面板
    this.blankAreaElem.addEventListener(&#39;click&#39;, 
     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 (
      <p
        className="blank_area"
        ref={(r) => {
          this.blankAreaElem = r;
        }}
      >

      {/* 打开面板按钮 */}
        <a
          role="button"
          tabIndex="0"
          className="btn_open_current_area"
          onClick={this.handleClickOpenCurrentArea.bind(this)}
        >
          <p className="btn_open_current_area_text">打开面板</p>
        </a>

   
      {/* 要关闭或开启的面板current_area */}
        {
          this.state.openCurrentArea
          &&
          61a9979edf4c3ad228b0d192600306e4 {
              this.currentAreaElem = r;
            }}
          >
            5977fe90fcb5b6c04c7282c8a011da56点击旁边灰色区域关闭当前面板94b3e26ee717c64999d7867364b1b4a3
          94b3e26ee717c64999d7867364b1b4a3
        }
      94b3e26ee717c64999d7867364b1b4a3
    );
  }
}

export default CloseTheDomByClickBlankArea;

以上是如何利用contains方法实现点击界面空白部分关闭当前面板的效果的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn