点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能。然后我们在不需要隐藏弹出层的元素上阻止冒泡即可。
class Select extends Component {
constructor(props) {
super(props);
this.state = {
selected: props.list[0],
showList: false
};
this.showList = this.showList.bind(this);
}
componentDidMount() {
// 在 document 上绑定点击事件,隐藏弹出层
document.addEventListener('click', (e) => {
this.setState({
showList: false
});
});
}
showList(e) {
// 使用 react 的 e.stopPropagation 不能阻止冒泡,需要使用 e.nativeEvent.stopImmediatePropagation,这里我们对其进行封装,方便多次调用
this.stopPropagation(e);
this.setState({
showList: !this.state.showList
});
}
selectList(i) {
const selected = this.props.list[i];
this.setState({
selected: selected,
showList: false
});
this.props.onChange(selected);
}
// 封装后的阻止冒泡功能
stopPropagation(e) {
e.nativeEvent.stopImmediatePropagation();
}
render() {
const { list } = this.props;
const { selected, showList } = this.state;
return (
{selected.text}
className="hp-select__list"
style={{ display: showList ? 'block' : 'none' }}
// 方便的调用封装冒泡功能来阻止冒泡
onClick={this.stopPropagation}
>
{
list && list.map((item, i) => {
return
{item.text};})
}
);
}
}
js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏)
...vue中点击空白处隐藏弹框(用指令优雅地实现)
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好
layui如何隐藏弹出层关闭的按钮
layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可 效果图如下: 示例代码如下: layui.use('layer', func ...
深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
js 点击 隐藏弹出层
document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...
[转]Jquery 点击图片在弹出层显示大图
这个还行不需要别的包! https://www.cnblogs.com/antis/p/7053991.html
Layer 弹出页面 在点击保存关闭弹出层
...
利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
随机推荐
华为5G空口新技术(2015年)
2015-03-24 长江后浪推前浪,4G建设方兴未艾,业界关于5G的讨论已如火如荼.对于每一代移动通信,空口技术都相当于王冠上的明珠. 在月初的世界移动通信大会上,华为发布了面向5G的新空口,并展出 ...
PHP 打印调试信息
1.将输出的数组存入文件,比如debug_trace()的输出: $debug_info = print_r(debug_backtrace(),true); file_put_contents(&q ...
MSBI - KPI
KPI - common members: Value, Target, Status, Trend.
[转]C#面试题
本文转自http://www.cnblogs.com/lhws/archive/2010/09/21/1827115.html 1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? ...
使用 Attribute +反射 来对两个类之间动态赋值
看同事使用的 一个ORM 框架 中 有这样一个功能 通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的 Dapper 所 ...
转:Stack Overflow通过关注性能,实现单块应用架构的扩展能力
原文来自于:http://www.infoq.com/cn/news/2015/07/scaling-stack-overflow 在New York QCon 2015大会上,David Fulle ...
Thread thread2 = new Thread()
Thread thread2 = new Thread() { @Override public void run() { test.function(); } }; thread1.start(); ...
2017 UESTC Training for Graph Theory
图论姿势太弱,这套题做了好久.. A:枚举最短那条边,然后最小生成树那种操作,1 和 n 联通就算答案 B:考虑到假如我们能凑出x的话,那很明显我们也能凑出任意数表示x + ai,考虑选取一个ai,然 ...
thinkphp分页带数据
因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...
Freeswitch配置之sofia
SIP模块 - mod_sofia SIP 模块是 FreeSWITCH的主要模块. 在 FreeSWITCH中,实现一些互联协议接口的模块称为 Endpoint.FreeSWITH支持很多的 End ...