js再谈移动端的模态框实现

Posted 2020-09-29 小白电猫

　　移动端模态框的机制因为与PC的模态框机制一直有所区别，一直是许多新人很容易踩坑的地方，最近笔者作为一条老咸鱼也踩进了一个新坑中，真是平日里代码读得太粗略，故而写上几笔，以儆效尤。

　　故事的起因是这样的，兄弟团的童鞋的页面出现了模块框内需要滚动元素的需求，但是实际情况是他调试了很久，却没有找到确定的解决问题，这也引起了笔者的注意，虽然有现成的组件，但是因为相关代码是有一些历史的了，并没有迁移，于是笔者就和他以前联调了一番。

　　我们知道常见的pc端模块框阻止滚动的方式是在html或者body标签上添加overflow:hidden,以及margin:0等来实例上将页面置为一个不可滚动的页面，而在移动端，则需要我们手动的阻止相关dom的touchmove事件的冒泡，来达到目的，示意代码如下：

/*html code*/
<div class=‘modal‘>
    <div class="overlay" id="overlayId"></div>
    <div class=‘modal-content‘id=‘YourModalContentId‘></div>
</div>
/*js code*/
function addEvt(dom){
    dom && dom.addEventListener(‘touchmove‘, onTouchMove);
}
function onTouchMove(e){
    e.preventDefault();
}
function fn(){
    let overlayDom = document.querySelector(‘#overlayId‘);
    let modalDom = document.querySelector(‘#YourModalContentId‘);
}

　　阻止所有手指可以碰触的元素的touchmove事件冒泡(以免引起比如在微信中的view滚动，也可避免不能触发click事件，因为click事件不需要touchmove，只需要touchstart和touchend)，这是其中的原理，然后实际例子稍微复杂了一点，因为实际场景需要modalcontent内部的dom滚动，一般做法是引入iscroll用touchmove事件来模拟滚动事件，但是这位童鞋做了常规操作之后得到了不同的结论，里面的dom依然不能滚动，经过笔者和他仔细的比对之后，发现基本上只有一行代码的不同：

/*html code*/
<div class=‘modal‘>
    <div class="overlay" id="overlayId"></div>
    <div class=‘modal-content‘id=‘YourModalContentId‘>
        <ul>
            ...
        </ul>
    </div>
</div>
/*js code*/
function addEvt(dom){
    dom && dom.addEventListener(‘touchmove‘, onTouchMove);
}
function onTouchMove(e){
    e.preventDefault();
    e.stopPropagation();
}
function fn(){
    let overlayDom = document.querySelector(‘#overlayId‘);
    let modalDom = document.querySelector(‘#YourModalContentId‘);
    let scroller = new IScroll(modalDom, YourOptions);
}

　　就是上面标红的那句话，但是正常情况下stopPropagation才是阻止事件冒泡，笔者开始也以为应该是没有关系的，但是经过反复测试后发现。。没有那句话，内部dom的滚动没有任何问题，但是有了那句话之后，内部则不能滚动了。。细细思考之后，笔者觉着。。多半是iscroll内部的实现机制了。。

　　于是读了下iscroll的源码，发现iscroll在initEvents时做了一个神奇的操作：

        _initEvents: function(remove) {
            var eventType = remove ? utils.removeEvent : utils.addEvent,
                target = this.options.bindToWrapper ? this.wrapper : window;

            eventType(window, ‘orientationchange‘, this);
            eventType(window, ‘resize‘, this);

            if (this.options.click) {
                eventType(this.wrapper, ‘click‘, this, true);
            }

            if (!this.options.disableMouse) {
                eventType(this.wrapper, ‘mousedown‘, this);
                eventType(target, ‘mousemove‘, this);
                eventType(target, ‘mousecancel‘, this);
                eventType(target, ‘mouseup‘, this);
            }

            if (utils.hasPointer && !this.options.disablePointer) {
                eventType(this.wrapper, ‘MSPointerDown‘, this);
                eventType(target, ‘MSPointerMove‘, this);
                eventType(target, ‘MSPointerCancel‘, this);
                eventType(target, ‘MSPointerUp‘, this);
            }

            if (utils.hasTouch && !this.options.disableTouch) {
                eventType(this.wrapper, ‘touchstart‘, this);
                eventType(target, ‘touchmove‘, this);
                eventType(target, ‘touchcancel‘, this);
                eventType(target, ‘touchend‘, this);
            }

            eventType(this.scroller, ‘transitionend‘, this);
            eventType(this.scroller, ‘webkitTransitionEnd‘, this);
            eventType(this.scroller, ‘oTransitionEnd‘, this);
            eventType(this.scroller, ‘MSTransitionEnd‘, this);
        }

　　在适用方没有强制绑定wrapper的情况下，touchstart、touchmove、touchend的target都是window！看到这里聪明的你也许已经反应过来了，这就是为什么我们平常写到touch事件的代码在移动出了dom的范围之后不能正常的释放，而iscroll的可以。。因为除了touchstart之外，其他的事件都是加在全局的window对象上的，而我们遇到的这个实际问题又恰恰使用了touchmove事件，事件触发的层级关系变成了：

/*dom 示意*/
window  //iscroll 处理touchmove
-html
-body
--modal
---overlay //阻止事件冒泡
---modal-content //阻止事件冒泡
----iScrollElement

　　我们需要等待事件冒泡到了window上，才能正常的处理iscrollElement的touchmove行为，看到这里。。笔者内心也是深感“这是一个何其大的大乌龙啊”。。不过也是因为平日中太过偏重解决问题，而没有仔细研究解决问题的方法的原理与机制。

　　虽然各司其职是现代化大分工的基本诉求，但是有的时候知其所以然才能更有价值的提高我们的工作效率，对于我们解决实际问题，也是颇有裨益的。