移动端/解决scroll和touch事件的冲突/冒泡

function preventTouch() {
    let flag = false // 是否滚动
    const main = document.getElementById('main') //有滚动的面板
    const cur = this
    let dur = 0 // 触摸时间,太短不触发
    let date_start, date_end

    main.addEventListener('touchstart', handler, {
        passive: false
    })
    main.addEventListener('touchmove', handler, {
        passive: false
    })
    main.addEventListener('scroll', handler, {
        passive: false
    })

    function handler(e) {
        switch (e.type) {
            case 'touchstart':
                flag = false
                date_start = new Date()
                break
            case 'touchmove':
                date_end = new Date()
                dur = date_end - date_start
                if (flag || dur < 300) { //表示是滚动完成后的那个touch不触发/间隔太短
                    e.stopImmediatePropagation() // 阻止冒泡
                }
                break
            case 'scroll':
                if (!flag) {
                    flag = true
                }
                break
        }

    }
}
贡献者: mankueng