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

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

 <div
                id='hospitalsContainer'
                onTouchMove={(e)=>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 (
            <div
                id='hospitalsContainer'
                onTouchMove={(e)=>this.handleTouchMove(e)}
                className={'hospitalsContainer'}>
                <Header title={'医院列表'} onBack={this.handleBack}/>
                <Tabs
                    handelTabRowSel={(item, index) => this.handelTabRowSel(item, index)}
                    handelTabItemSel={(item) => this.handelTabItemSel(item)}
                />
                <HospitalsItem data={this.props.hospitalList} isLastPage={isLastPage}/>
                {fetchingStatus
                    ?
                    <LoadingMask/>
                    :
                    null
                }
            </div>
        )
    }

    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的点击事件

<div className={'tabs__BottomWrapper__tab3__con'} onClick={(e) => {
                                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 (
            <div className={'tabs'}>
                <div className={'tabs__searchTOPWrapper'}>
                    <div className={this.state.tab1focused ? 'searchItemSeled' : 'searchItem'}
                         onClick={() => this.tabSelc(1)}>
                        {this.state.tab1focused_title}
                        <div className={this.state.tab1focused ? 'searchItemSeledLine' : ''}/>
                    </div>
                    <div className={this.state.tab2focused ? 'searchItem2Seled' : 'searchItem2'}
                         onClick={() => this.tabSelc(2)}>
                        {this.state.tab2focused_title}
                        <div className={this.state.tab2focused ? 'searchItemSeledLine' : ''}/>
                    </div>
                    <div className={this.state.tab3focused ? 'searchItemSeled' : 'searchItem'}
                         onClick={() => this.tabSelc(3)}>筛选
                        <div className={this.state.tab3focused ? 'searchItemSeledLine' : ''}/>
                    </div>
                </div>
                <div
                    id="tabsBottomWrapperCon"
                    className={this.state.tabMaskIsSHow ? 'tabs__BottomWrapper__con__show' : 'tabs__BottomWrapper__con'}
                    onClick={() => this.close()}
                    onTouchMove={(e)=>this.handleTouchMove(e)}

                >
                    {this.state.tab1focused
                        ?
                        <div
                            className={this.state.tab1focused ? 'tabs__BottomWrapper__tab' : 'tabs__BottomWrapper__tabSel'}
                        >
                            {areasList.map((item) => {
                                return <div className={'tabs__Bottom__Item'}
                                            key={item.name} onClick={() => this.tabRowSel(item, 1)}>{item.name}</div>
                            })}

                        </div>
                        :
                        null
                    }
                    {this.state.tab2focused
                        ?
                        <div
                            className={this.state.tab2focused ? 'tabs__BottomWrapper__tab' : 'tabs__BottomWrapper__tabSel'}>
                            {ZHPX.map((item) => {
                                return <div className={'tabs__Bottom__Item'}
                                            key={item.value}
                                            onClick={() => this.tabRowSel(item, 2)}>{item.title}</div>
                            })}
                        </div>
                        :
                        null
                    }
                    {this.state.tab3focused
                        ?
                        <div
                            className={this.state.tab3focused ? 'tabs__BottomWrapper__tab' : 'tabs__BottomWrapper__tabSel'}>
                            <div className={'tabs__BottomWrapper__tab3__con'} onClick={(e) => {
                                e.stopPropagation()
                            }}>
                                <div>
                                    <div>
                                        医院类型: {this.state.sx_lx.title}
                                    </div>
                                    <div className={'tabs__tab3__inner'}>
                                        {this.state.sx_lx.data.map((item) => {
                                            return <div
                                                className={item.isSel ? 'tabs3__innerTextSel' : 'tabs3__innerText'}
                                                key={item.value}
                                                onClick={(e) => this.tabItemSel(e, item, 1)}>{item.title}</div>
                                        })}
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        医院类型: {this.state.sx_dj.title}
                                    </div>
                                    <div className={'tabs__tab3__inner'}>
                                        {this.state.sx_dj.data.map((item) => {
                                            return <div
                                                className={item.isSel ? 'tabs3__innerTextSel' : 'tabs3__innerText'}
                                                key={item.value}
                                                onClick={(e) => this.tabItemSel(e, item, 2)}>{item.title}</div>
                                        })}
                                    </div>
                                    <div className={'tabs__tab3__btn'} onClick={() => this.tabItemBtnClick()}>确定</div>
                                </div>
                            </div>

                        </div>
                        :
                        null
                    }
                </div>
            </div>
        )
    }

    //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)
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,811评论 1赞 45
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,548评论 1赞 11
  • 移动端300ms点击延迟和点击穿透问题
    一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我...
    Lamport阅读 423评论 0赞 0
  • 移动端300ms点击延迟和点击穿透问题
    一、移动端300ms点击延迟 一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300...
    tsyeyuanfeng阅读 33,220评论 8赞 69