利用contains方法实现:点击界面空白部分关闭当…

2018-06-24 00:31:26来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

要用到的方法:

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

链接:https://www.w3schools.com/Jsref/met_node_contains.asp

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

链接:http://www.w3school.com.cn/jsref/event_target.asp

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

 链接:http://www.runoob.com/jsref/met-element-addeventlistener.html

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

示例:
<div

ref={(r) => {
this.divElem = r;
}}
>
</div>

上面是es6的用法,es5(不推荐)看这里: http://www.runoob.com/react/react-refs.html

 

废话说完,上图上代码:

效果图:

代码:

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

export default CloseTheDomByClickBlankArea;

 

GitHub项目链接:https://github.com/AbrahamJiang/my-react-demos

本文代码在src下CloseTheDomByClickBlankContain/中。


			   
			   

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

下一篇:JavaScript面向对象基础与this指向问题