react实现点击某个元素之外自动隐藏此元素

是在redux-saga和react-redux环境下

步骤一: 给document绑定事件

步骤二: 构建hide函数

步骤三: 给元素内子元素点时不需要隐藏它的方法加上阻止事件冒泡事件, 这样就不会冒泡到顶层的document

   e.nativeEvent.stopImmediatePropagation();

原文地址：https://www.cnblogs.com/rushAvenda/p/10162111.html

时间： 2024-08-30 17:54:33

react实现点击某个元素之外自动隐藏此元素的相关文章

点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)

1>第一种分两步 1) :对document的click事件绑定事件处理程序,使其隐藏该div 2) :对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. 1 <script type="text/javascript"> 2 function stopPropagation(e) { 3 if (e.stopPropagation) 4 e.stopPropagation(

jq点击元素之外关闭元素的共存问题

1.首先第一个想到的是阻止事件冒泡; 随便写的css; .select-wrap, .select-wrap1{ position: relative; width: 100px; border: 1px solid #000; } .select-wrap1{ margin-top: 100px; } .select-list{ display: none; position: absolute; border: 1px solid red; top: 100%; left: 0 } <div

网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

滑动ListView自动隐藏页面头部和底部元素的例子

完整工程代码在这:https://github.com/NashLegend/Auto-Hide-ListView 现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+.在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐藏头尾元素,以显示更多内容,当列表向下滑动的时候,再将头尾元素拉出来.比如Google+. 刚刚进入时是这个样子: 再把列表身上一拉,头尾隐藏,成了这个样子: 再往下拉,就会再变回第一

子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

方法一: html: <div id="all1"> <div id="left1">1</div> <div id="left2">1</div> <div style=" clear:both; "></div> </div> css: #left1{ float:left;width:200px;} #left2{ float

点击空白区域隐藏指定元素实例代码

点击空白区域隐藏指定元素实例代码:此效果不是无的放矢的,当然正常的应用应该没有这么简单,一般都是和其他的功能结合在一起的,比如自定义select下拉菜单,点击空白区域的时候可以隐藏下拉菜单,本章节就是单独拿出这个功能做一下简单的介绍.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content=&

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

关于js自动添加input元素的一个问题

今天用js来实现input元素的自动添加,添加的是一个文件上传的框,如上文所示,发现可以进行文件选择框的自动添加,但是在最后上传的时候,需要根据getElementsByName来获取这些文件数组,但是发现之前定义的name都没有赋上值,用F12查看元素,发现添加的文件框,没有添加name属性,而自动变为了submitname属性(IE中是这样,360极速的时候是赋值的name),突然发现微软定义name属性的时候,设定name属性为只读,不让修改,故这里会有问题,解决方法如下: var inp

点击子元素事件不触发父元素事件