如何利用contains方法實現點擊介面空白部分關閉目前面板的效果-js教程-PHP中文網

如何利用contains方法實現點擊介面空白部分關閉目前面板的效果

一个新手

發布： 2017-10-17 09:36:13

原創

2054 人瀏覽過

今天為元件增加一個小功能，需要點擊介面空白部分關閉目前元件，找了好一會兒，發現主要是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...系列作用一樣

<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
          &&
          <p
            className="current_area"
            ref={(r) => {
              this.currentAreaElem = r;
            }}
          >
            <p className="current_area_text">点击旁边灰色区域关闭当前面板</p>
          </p>
        }
      </p>
    );
  }
}

export default CloseTheDomByClickBlankArea;

登入後複製

以上是如何利用contains方法實現點擊介面空白部分關閉目前面板的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！