react阻止冒泡事件
来源:互联网 发布:网络教育本科费用 编辑:程序博客网 时间:2024/05/21 22:31
最近在研究react、redux等,网上找了很久都没有完整的答案,如果对你有用就关注一下,以后都会有干货分享的,谢谢。
首先,要知道再react中的合成事件和原生事件之间的区别http://www.jianshu.com/p/e0894bd588f4。
1、合成事件
在jsx中直接绑定的事件,如
<a ref="aaa" onClick={(e)=>this.handleClick(e)}>更新</a>
这里的handleClick事件就是合成事件
2、原生事件
通过js原生代码绑定的事件,如
document.body.addEventListener('click',e=>{// 通过e.target判断阻止冒泡 if(e.target&&e.target.matches('a')){return; }console.log('body');})或this.refs.update.addEventListener('click',e=>{ console.log('update'); });
3、阻止冒泡事件分三种情况
A、阻止合成事件间的冒泡,用e.stopPropagation();
import React,{ Component } from 'react';import ReactDOM,{findDOMNode} from 'react-dom';class Counter extends Component{constructor(props){super(props);this.state = {count:0, } }handleClick(e){// 阻止合成事件间的冒泡 e.stopPropagation();this.setState({count:++this.state.count}); }testClick(){console.log('test') }render(){return(<div ref="test" onClick={()=>this.testClick()}><p>{this.state.count}</p><a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a></div> ) }}var div1 = document.getElementById('content');ReactDOM.render(<Counter/>,div1,()=>{});
B、阻止原生事件与最外层document上的事件间的冒泡,用
e.nativeEvent.stopImmediatePropagation();import React,{ Component } from 'react';import ReactDOM,{findDOMNode} from 'react-dom';class Counter extends Component{constructor(props){super(props);this.state = {count:0, } }handleClick(e){// 阻止原生事件与最外层document上的事件间的冒泡 e.nativeEvent.stopImmediatePropagation();this.setState({count:++this.state.count}); }render(){return(<div ref="test"><p>{this.state.count}</p><a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a></div> ) }componentDidMount() {document.addEventListener('click', () => {console.log('document'); }); }}var div1 = document.getElementById('content');ReactDOM.render(<Counter/>,div1,()=>{});
C、阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
import React,{ Component } from 'react';import ReactDOM,{findDOMNode} from 'react-dom';class Counter extends Component{constructor(props){super(props);this.state = {count:0, } }handleClick(e){this.setState({count:++this.state.count}); }render(){return(<div ref="test"><p>{this.state.count}</p><a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a></div> ) }componentDidMount() {document.body.addEventListener('click',e=>{// 通过e.target判断阻止冒泡 if(e.target&&e.target.matches('a')){return; }console.log('body'); }) }}var div1 = document.getElementById('content');ReactDOM.render(<Counter/>,div1,()=>{});
阅读全文
0 0
- react阻止冒泡事件
- react:阻止事件冒泡
- React 如何阻止事件冒泡?
- react阻止冒泡事件(使用原生js方法)
- javascript阻止冒泡事件
- 阻止冒泡事件
- Js 冒泡事件阻止
- jQuery阻止事件冒泡
- 阻止js事件冒泡
- Jquery 阻止事件冒泡
- JS阻止事件冒泡
- 阻止事件冒泡
- JS阻止事件冒泡
- javascript阻止事件冒泡
- javascript 阻止事件冒泡
- 阻止事件冒泡
- Js 冒泡事件阻止
- JS事件冒泡(阻止
- C#将DataTable转化为List<T>
- 特殊交换(蘑菇街笔试题)
- elasticsearch集群的详细安装步骤
- Bootstrap学习之二:栅格化布局
- 深度神经网络-权值参数个数计算
- react阻止冒泡事件
- (HDU 2821)Pusher DFS + 在一个方向上可以移动多位
- bootstrap表格和按钮
- android中实现对多个EditText的监听
- 关于fragment嵌套fragment,第一次能加载布局,第二次不能加载布局的问题
- Highway 湘潭邀请赛(江苏省赛)----树的直径
- 枚举进程中的模块
- 10-排序6 Sort with Swap(0, i) (25分)
- 基于Spring注解实现工厂模式