React阻止事件冒泡的正确打开方式
需求:点击导航list按钮出现侧弹框,点击空白处弹框消失
问题:绑定空白处的点击事件到document上,但是非空白处的点击也会触发这个点击事件,在react中如何阻止事件冒泡?
解决方法:e.stopPropagation()并不奏效,react有专属的阻止事件冒泡方法,e.nativeEvent.stopImmediatePropagation()
示例:
/**
* Created by sunzhuoyi on 17/3/6.
*/
import React from 'react';
import {connect} from 'react-redux';
import {autobind} from 'core-decorators';
import {pushState} from 'redux-router';
import Store from '@comynli/store';
import {Menu, Icon, Row, Col, Dropdown, Button, Affix} from 'antd'; @connect(state => ({}),{pushState}) export default class Common extends React.Component {
constructor(props){
super(props);
this.state = {
current:'index',
barDisplay:true
}
} componentDidMount(){
document.onclick=this.handleBarDisplayShow;
} @autobind
handleClick(e) {
this.setState({
current: e.key,
});
} @autobind
handleInLineClick(e) {
this.setState({
current: e.key,
});
} @autobind
handleBarDisplay(e){
e.nativeEvent.stopImmediatePropagation();
this.setState({barDisplay:false})
} @autobind
handleBarDisplayShow(){
e.nativeEvent.stopImmediatePropagation();
this.setState({barDisplay:true})
} render() {
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
return(
<div style={{width:'100%'}}>
<Affix>
<Menu onClick={this.handleClick}
mode="horizontal"
style={{lineHeight:'60px',paddingLeft:'20px'}}
>
{
this.state.barDisplay === true ? <Menu.Item key="bars" >
<Icon type="bars" onClick={e => this.handleBarDisplay(e)}/>
</Menu.Item> : <span></span>
}
<Menu.Item key="Poseidon">
<a href="/"><b>Poseidon</b></a>
</Menu.Item>
</Menu>
</Affix>
{
this.state.barDisplay === false ?
<Menu onClick={this.handleInLineClick}
style={{width: 240, paddingLeft: '20px', height: '1500px'}}
mode="inline"
>
<Menu.Item key="Project">
<a href="/">Project</a>
</Menu.Item>
<Menu.Item key="ProjectTwo">
<a href="/">Project</a>
</Menu> : <span></span>
} </div>
)
}
}
React阻止事件冒泡的正确打开方式的更多相关文章
- react 阻止事件冒泡
前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...
- jquery阻止事件冒泡的3种方式
第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- JQuery 提供了两种方式来阻止事件冒泡。
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
随机推荐
- Table转换成实体、Table转换成实体集合(可转换成对象和值类型)
/// <summary> /// Table转换成实体 /// </summary> /// <typeparam name="T">< ...
- Scott用户的表结构
在Oracle的学习之中,重点使用的是SQL语句,而所有的SQL语句都要在scott用户下完成,这个用户下一共有四张表,可以使用: SELECT * FROM tab; 查看所有的数据表的名称,如果现 ...
- 积分之迷-2015决赛C语言B组第一题
标题:积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C. 为了促销,每件商品都会返固定的积分. 小明开业第一天收到了三笔订单: 第一笔:3个A + 7个B + 1个C,共返积分:315 ...
- HDFS 命令大全
目录 概要 用户命令 dfs 命令 追加文件内容 查看文件内容 得到文件的校验信息 修改用户组 修改文件权限 修改文件所属用户 本地拷贝到 hdfs hdfs 拷贝到本地 获取目录,文件数量及大小 h ...
- HDU4292(KB11-H 最大流)
Food Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- LOJ1070(SummerTrainingDay05-B 矩阵快速幂)
Algebraic Problem Given the value of a+b and ab you will have to find the value of an+bn. a and bnot ...
- Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...
- 设计模式(13)--Chain of Responsibility(责任链模式)--行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一 ...
- 【查找数字x第k为上的数字】
#include<stdio.h> #include<math.h> // 求x用10进制表示时的数位长度 int len(int x){ ) ; )+; } // 取x的第k ...
- Windows10设置
按下Win+R键,输入gpedit.msc,打开组策略窗口