标签：实现 blog 研究 机制 迁移 remove scroll 而在 tor
移动端模态框的机制因为与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行为，看到这里。。笔者内心也是深感“这是一个何其大的大乌龙啊”。。不过也是因为平日中太过偏重解决问题，而没有仔细研究解决问题的方法的原理与机制。
虽然各司其职是现代化大分工的基本诉求，但是有的时候知其所以然才能更有价值的提高我们的工作效率，对于我们解决实际问题，也是颇有裨益的。
标签：实现 blog 研究 机制 迁移 remove scroll 而在 tor
原文地址：http://www.cnblogs.com/mfoonirlee/p/7226613.html
