touchmove在 部分android uc上面的滑动透传问题

先来看一组代码

class test extends React.Component {
    render() {
        return (
            <div style={{height: 300, backgroundColor: 'red'}}
                 onTouchStart={this.onTouchStart}
                 onTouchMove={this.onTouchMove}
                 onTouchEnd={this.onTouchEnd}>
            </div>
        )
    }
    onTouchStart = e => {
        e.preventDefault();
    }
    onTouchMove = e => {
        e.preventDefault();
    }
    onTouchEnd = e => {
        e.preventDefault();
    }
}

在红米 uc上面执行后，发现上下滑动，会唤起浏览器的滑动，如下拉刷新最为明显，在网上查找了下，很多处理方式太坑了，什么触发的时候把 html，body 样式调整为 height: 100%; position: relative; 或者是加多一个层级作为fiexd来遮挡……..等等，都不会处理成功，干脆上 ant-design-mobile中的 组件查看，发现效果在uc上面不会存在滑动透传问题，所以就查到git中，如下

import RCDatePicker from 'rmc-date-picker/lib/DatePicker';

调用了该库，那么顺便咯，反正git能找到，https://github.com/xshua06/rmc-picker/blob/master/lib/Picker.js

var component = this.refs.component;

component.addEventListener('touchstart', this.onTouchStart, false);
component.addEventListener('touchmove', this.onTouchMove, false);
component.addEventListener('touchend', this.onTouchEnd, false);

用这种方式处理，好，试一下，发现在uc上面成功执行，就解决了touchmove的透传

class test extends React.Component {
    refDiv = null
    componentDidMount() {
        const { refDiv } = this;
        refDiv.addEventListener('touchstart', this.onTouchStart, false);
        refDiv.addEventListener('touchmove', this.onTouchMove, false);
        refDiv.addEventListener('touchend', this.onTouchEnd, false);
    }
    componentWillUnmount() {
        const { refDiv } = this;
        refDiv.removeEventListener('touchstart', this.onTouchStart, false);
        refDiv.removeEventListener('touchmove', this.onTouchMove, false);
        refDiv.removeEventListener('touchend', this.onTouchEnd, false);
    }
    render() {
        return (
            <div style={{height: 300, backgroundColor: 'red'}}
                 ref={refDiv => this.refDiv = refDiv}>
            </div>
        )
    }
    onTouchStart = e => {
        e.preventDefault();
    }
    onTouchMove = e => {

    }
    onTouchEnd = e => {

    }
}