react 移动端：div嵌套子点击子div会触发最外城div onClick时间，滑动穿透问题

滑动穿透文件：就是直接禁止当前页面的滚动事件

 
this.handleTouchMove(e)}
                className={'hospitalsContainer'}/>

    handleTouchMove(event){
        event.preventDefault();
    }


        document.getElementById('hospitalsContainer').addEventListener("touchmove", (event) => {
            // 执行滚动回调
            event.preventDefault();
        }, {
            passive: false //  禁止 passive 效果
        })


/**
 * Class:
 * Author: wufei
 * Date: 2019/5/24
 * Description:
 *  医院列表容器
 */
import React, {Component} from 'react'
import Header from "../../components/Header/Header";
import HospitalsItem from "./components/HospitalsItem/HospitalsItem";
import Tabs from "./components/Tabs/Tabs";
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {
    actions as hospitalActions,
    getHospitalList,
    getFetchingStatus,
    getIsLastPage
} from '../../reduxs/modules/hospital'
import './style.css'
import LoadingMask from "../../components/Loading/LoadingMask";

class HospitalsContainer extends Component {

    render() {
        const {fetchingStatus, isLastPage} = this.props
        return (
            
this.handleTouchMove(e)}
                className={'hospitalsContainer'}>
                

                 this.handelTabRowSel(item, index)}
                    handelTabItemSel={(item) => this.handelTabItemSel(item)}
                />
                
                {fetchingStatus
                    ?
                    
                    :
                    null
                }
            
        )
    }

    handleBack = () => {
        this.props.history.goBack()
    }

    handleTouchMove(event){
        event.preventDefault();
    }

    componentDidMount() {

        document.getElementById('hospitalsContainer').addEventListener("touchmove", (event) => {
            // 执行滚动回调
            event.preventDefault();
        }, {
            passive: false //  禁止 passive 效果
        })

        this.props.hospitalActions.loadHosipitalList()
    }

    //处理行选中
    handelTabRowSel(item, index) {
        if (index == 1) { // 区域
            this.props.hospitalActions.setAreaId(item.code)
        } else { // 综合排序
            this.props.hospitalActions.setSord(item.value)
        }
        this.props.hospitalActions.loadHosipitalList()
    }

    //处理列选中
    handelTabItemSel(item) {
        this.props.hospitalActions.setCategoryGrade(item)
        this.props.hospitalActions.loadHosipitalList()
    }
}


const mapStateToProps = (state) => {
    return {
        hospitalList: getHospitalList(state),
        fetchingStatus: getFetchingStatus(state),
        isLastPage: getIsLastPage(state)
    }
}


const mapDispatchToProps = (dispatch) => {
    return {
        hospitalActions: bindActionCreators(hospitalActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HospitalsContainer)

点击子div会触发最外城div的点击事件

 {
                                e.stopPropagation()
                            }}/>

/**
 * Class:
 * Author: wufei
 * Date: 2019/5/26
 * Description:  tabs 选择器
 *
 */
import React, {Component} from 'react'
import {ZHPX, SX_YYLX, SX_YYDJ} from '../../../../static/DictionaryConstant'
import './style.css'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as tabActions, getAreasList} from "../../../../reduxs/modules/tabs";


class Tabs extends Component {

    constructor(props) {
        super(props)
        this.state = {
            tab1focused: false,
            tab1focused_title: '全部区域',
            tab2focused: false,
            tab2focused_title: '综合排序',
            tab3focused: false,
            tabMaskIsSHow: false,
            sx_lx: SX_YYLX,
            sx_dj: SX_YYDJ,
            tab_sx_value: [],// 筛选
            tab_qylb_value: '',// 全部区域
            tab_zhpx_value: '',// 综合排序
        }
    }

    render() {
        const {areasList} = this.props
        return (
            

                

                    
 this.tabSelc(1)}>
                        {this.state.tab1focused_title}
                        

                    
                    
 this.tabSelc(2)}>
                        {this.state.tab2focused_title}
                        

                    
                    
 this.tabSelc(3)}>筛选
                        

                    
                
                
 this.close()}
                    onTouchMove={(e)=>this.handleTouchMove(e)}

                >
                    {this.state.tab1focused
                        ?
                        

                            {areasList.map((item) => {
                                return 
 this.tabRowSel(item, 1)}>{item.name}
                            })}

                        
                        :
                        null
                    }
                    {this.state.tab2focused
                        ?
                        

                            {ZHPX.map((item) => {
                                return 
 this.tabRowSel(item, 2)}>{item.title}
                            })}
                        
                        :
                        null
                    }
                    {this.state.tab3focused
                        ?
                        

                            
 {
                                e.stopPropagation()
                            }}>
                                

                                    

                                        医院类型: {this.state.sx_lx.title}
                                    
                                    

                                        {this.state.sx_lx.data.map((item) => {
                                            return 
 this.tabItemSel(e, item, 1)}>{item.title}
                                        })}
                                    
                                
                                

                                    

                                        医院类型: {this.state.sx_dj.title}
                                    
                                    

                                        {this.state.sx_dj.data.map((item) => {
                                            return 
 this.tabItemSel(e, item, 2)}>{item.title}
                                        })}
                                    
                                    
 this.tabItemBtnClick()}>确定
                                
                            

                        
                        :
                        null
                    }
                
            
        )
    }

    //tab选中
    tabSelc(index) {
        switch (index) {
            case 1:
                if (this.state.tab1focused) {
                    this.setState({
                        tabMaskIsSHow: !this.state.tabMaskIsSHow
                    })
                } else {
                    this.setState({
                        tab1focused: !this.state.tab1focused,
                        tab2focused: false,
                        tab3focused: false,
                        tabMaskIsSHow: !this.state.tab1focused
                    })
                }
                return
            case 2:
                if (this.state.tab2focused) {
                    this.setState({
                        tabMaskIsSHow: !this.state.tabMaskIsSHow
                    })
                } else {
                    this.setState({
                        tab1focused: false,
                        tab2focused: !this.state.tab2focused,
                        tab3focused: false,
                        tabMaskIsSHow: !this.state.tab2focused
                    })
                }

                return
            case 3:
                if (this.state.tab3focused) {
                    this.setState({
                        tabMaskIsSHow: !this.state.tabMaskIsSHow
                    })
                } else {
                    this.setState({
                        tab1focused: false,
                        tab2focused: false,
                        tab3focused: !this.state.tab3focused,
                        tabMaskIsSHow: !this.state.tab3focused
                    })
                }
                return
            default:
                return
        }
    }

    //行选择
    tabRowSel(item, tabIndex) {
        if (tabIndex === 1) {
            this.setState({
                tabMaskIsSHow: false,
                tab_qylb_value: item.code,
                tab1focused_title: item.name
            })

        } else {
            this.setState({
                tabMaskIsSHow: false,
                tab_zhpx_value: item.value,
                tab2focused_title: item.title
            })
        }
        //容器回调
        this.props.handelTabRowSel(item, tabIndex)
    }

    //列选中
    tabItemSel(e, item, tabIndex) {
        e.stopPropagation();
        if (tabIndex === 1) {
            let lx = JSON.parse(JSON.stringify((this.state.sx_lx)))
            lx.title = item.title
            lx.data.map((dataItem) => {
                if (dataItem.value === item.value) {
                    dataItem.isSel = true
                } else {
                    dataItem.isSel = false
                }
            })
            this.setState({
                sx_lx: lx
            })
            return
        } else {
            let dj = JSON.parse(JSON.stringify((this.state.sx_dj)))
            dj.title = item.title
            dj.data.map((dataItem) => {
                if (dataItem.value === item.value) {
                    dataItem.isSel = true
                } else {
                    dataItem.isSel = false
                }
            })
            this.setState({
                sx_dj: dj
            })
            return
        }
    }

    //列选中->确定按钮
    tabItemBtnClick() {
        let lx = ''
        let dj = ''
        this.state.sx_lx.data.map((dataItem) => {
            if (dataItem.isSel) {
                lx = dataItem.value
            }
        })

        this.state.sx_dj.data.map((dataItem) => {
            if (dataItem.isSel) {
                dj = dataItem.value
            }
        })
        this.setState({
            tabMaskIsSHow: false
        })
        let param = {yylx: lx, yydj: dj}
        this.props.handelTabItemSel(param)
    }

    close() {
        this.setState({
            tabMaskIsSHow: false
        })
    }

    handleTouchMove(event){
        event.preventDefault();
    }

    componentDidMount() {
        this.props.tabActions.loadCitys()

        document.getElementById('tabsBottomWrapperCon').addEventListener("touchmove", (event) => {
            // 执行滚动回调
            event.preventDefault();
        }, {
            passive: false //  禁止 passive 效果
        })
    }
}

const mapStateToProps = (state) => {
    return {
        areasList: getAreasList(state)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        tabActions: bindActionCreators(tabActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Tabs)