1. 场景
父组件是个左右可滑动的组件，子组件是可左右滑动的图片展示。功能是手指左右滑动时可页面切换，但是在滑动图片列表时不可页面切换，问题在于滑动子组件时总是在时不时的切换页面。
父组件实现是监测touchStart,touchMove,touchEnd三个事件，子组件实现是监测touchstart 阻止冒泡。
2. 分析
多次测试，发现在滑动子组件时进行页面切换是总是进入父组件的touchMove，然后由于位置获取不正确，造成页面崩溃。
于是子组件添加touchMove阻止冒泡，发现无用。
单独测试发现，touchStart 的StopPropagation不会影响父组件的touchMove，touchEnd触发；
另外脱离业务场景测试发现，在子组件进行touchStart 、touchMove、touchEnd 阻止冒泡时是可以的，但是在业务中却发现不可以---> 问题点
查找touchMove,发现在父组件上touchMove 因为需要处理passive 问题，所以使用addEventListener进行绑定；子元素中使用onTouchMove进行绑定。 单独测试发现，父组件的touchMove总是优于子组件的touchMove触发。
3. 原因
以上问题的原因很明显了，react事件和DOM原生事件混合使用的问题。
为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。重要的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层Document进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。
React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡（注意是冒泡阶段）至document处时，React将事件内容封装并交由真正的处理函数运行。
React 中的event 不是原生的event，e.nativeEvent 才是原生 DOM 事件的那个 event。在测试中阻止冒泡可行是因为，e.stopPropagation() 阻止的是react 的合成的事件。
import React, { Component } from 'react';
class Test extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(e) {
console.log("子元素的点击");
}
componentDidMount(){
const parent = document.getElementById("parent");
parent.addEventListener("click",function(){
console.log("父元素上的点击");
})
}
render() {
return (
<div id="parent">
<div id="child" onClick={this.onClick}>
</div>
</div>
);
}
}
export default Test;
业务场景简化如上，解决办法：
1）react 合成事件与DOM点击事件不同时使用
2） 在父组件上使用target 进行判断。
在尝试解决这个问题，我尝试使用： 子组件onTouchMove 在捕获阶段绑定，这样子组件touchmove的触发应优先于父组件，但实际并不是，原因在于：合成事件的监听器是统一注册在document上的，且仅有冒泡阶段，所以原生事件的监听器响应总是比合成事件的监听器早。
4. 延伸
以上React 的设计思想是： 在 React 中不允许给同一个组件绑定多个相同类型的事件，如果非要重复绑定，那么后绑定的会覆盖前绑定的。要想在一个元素上绑定多个事件，需要使用原生方式。
那么问题来了：
如果我在一个元素上绑定多个事件，执行一个后，想停止执行其他的怎么办？ stopPropagation() ? No！
stopPropagation 能够阻止事件的进一步捕获或者冒泡；
假设事件流已经被某个元素捕获（或者冒泡到某个元素），那么便会触发此元素上绑定的事件。如果绑定的事件不止一个，则依次触发。假如想中断这种依次触发，需调用stopImmediatePropagation；
stopImmediatePropagation常常在多个第三方库混用时，用来阻止多个事件监听器中的非必要执行。
但React体系中，一个组件只能绑定一个同类型的事件监听器（重复定义时，后面的监听器会覆盖之前的），所以合成事件甚至都不去封装stopImmediatePropagation。事实上nativeEvent的stopImmediatePropagation只能阻止绑定在document上的事件监听器，所以在案例中的问题不能在子组件中使用e.nativeEvent.stopImmediatePropagation() 去解决，因为不是document。
🌰：
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.parentClick = this.parentClick.bind(this);
this.childClick = this.childClick.bind(this);
}
parentClick(e) {
console.log("react:父元素的点击");
}
childClick(e) {
// e.stopPropagation();
console.log("react:子元素的点击");
}
componentDidMount(){
const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.addEventListener("click",function(e){
console.log("dom:父元素上的点击");
})
child.addEventListener("click",function(e){
e.stopPropagation();
console.log("dom:子元素上的点击");
})
}
render() {
return (
<div id="parent" onClick={this.parentClick}>
<div id="child" onClick={this.childClick}>
click
</div>
</div>
);
}
}
export default App;
执行结果是：
dom:子元素上的点击
- 🌰:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.parentClick = this.parentClick.bind(this);
this.childClick = this.childClick.bind(this);
}
parentClick(e) {
console.log("react:父元素的点击");
}
childClick(e) {
e.stopPropagation();
console.log("react:子元素的点击");
}
componentDidMount(){
const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.addEventListener("click",function(e){
console.log("dom:父元素上的点击");
})
child.addEventListener("click",function(e){
// e.stopPropagation();
console.log("dom:子元素上的点击");
})
}
render() {
return (
<div id="parent" onClick={this.parentClick}>
<div id="child" onClick={this.childClick}>
click
</div>
</div>
);
}
}
export default App;
结果：
dom:子元素上的点击
dom:父元素上的点击
react:子元素的点击
可以发现原生事件上的阻止冒泡才是真正的冒泡。
