react阻止冒泡事件
2017-05-16 20:15
351 查看
最近在研究react、redux等,网上找了很久都没有完整的答案,如果对你有用就关注一下,以后都会有干货分享的,谢谢。
首先,要知道再react中的合成事件和原生事件之间的区别http://www.jianshu.com/p/e0894bd588f4。
1、合成事件
在jsx中直接绑定的事件,如
这里的handleClick事件就是合成事件
2、原生事件
通过js原生代码绑定的事件,如
3、阻止冒泡事件分三种情况
A、阻止合成事件间的冒泡,用e.stopPropagation();
B、阻止原生事件与最外层document上的事件间的冒泡,用
C、阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
首先,要知道再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,()=>{});
相关文章推荐
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
- react阻止冒泡事件(使用原生js方法)
- 小花 - React事件阻止浏览器默认行为/冒泡
- React 如何阻止事件冒泡?
- React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
- react:阻止事件冒泡
- Jquery 事件冒泡的介绍以及如何阻止事件冒泡
- 如何阻止事件冒泡和默认事件
- JQUERY中的事件处理:return false、阻止默认行为、阻止冒泡以及兼容性问题
- TypeScript ts阻止点击事件冒泡
- JQuery中阻止事件冒泡方式及其区别
- 阻止事件冒泡的兼容性写法
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
- 阻止js事件冒泡
- 兼容各大浏览器的JavaScript阻止事件冒泡代码
- javascript事件冒泡、捕获及阻止方法终极解答
- JQuery 提供了两种方式来阻止事件冒泡及区别
- 书:"Pro JavaScript Techniques 精通JavaScript"之阻止事件冒泡的通用函数
- 阻止事件冒泡
- Js 冒泡事件阻止