"JS" and the realization of modal frame of mobile end

The mechanism of the mobile end modal frame is different from the modal frame mechanism of PC, it is a place where many new people are easy to step on the pit, and recently I have stepped into a new pit as an old salted fish, it is true that the code read too rough, so write a few pens, deterrent.

The cause of the story is this, the Brother group of Children's shoes page appeared in the module box needs to scroll elements need, but the reality is that he has been debugging for a long time, but did not find a definite solution, which also caused the author's attention, although there are ready-made components, but because the relevant code is some history, and no migration, So the author and he before the joint tune.

We know that the common PC-side module box prevents scrolling by adding overflow:hidden on the HTML or body tag, and margin:0 the page as a non-scrollable page, and on the mobile side, We need to manually block the Touchmove event bubbling of the relevant DOM to achieve the purpose, the schematic code is as follows:

/*HTML code*/<div class= ' modal ' > <div class= "Overlay" id= "Overlayid" ></div> <div class= ' modal-content ' id= ' Yo Urmodalcontentid ' ></div></div>/*JS Code*/functionAddevt (DOM) {Dom&& dom.addeventlistener (' Touchmove ', Ontouchmove);}functionOntouchmove (e) {E.preventdefault ();}functionfn () {Let overlaydom= Document.queryselector (' #overlayId '); Let Modaldom= Document.queryselector (' #YourModalContentId ');}

Touchmove events that block all the elements that the finger can touch are bubbling (lest the view scroll in, for example), or the Click event cannot be triggered because the click event does not require Touchmove, only Touchstart and touchend are required. This is the principle, and then the actual example is slightly more complicated, because the actual scene needs to modalcontent the internal Dom scrolling, the general practice is to introduce iscroll with the Touchmove event to simulate the scrolling event, but the children's shoes have been a regular operation after the different conclusions, Inside the DOM still can't scroll, after the author and his careful comparison, found that basically only one line of code is different:

/*HTML code*/<div class= ' modal ' > <div class= "Overlay" id= "Overlayid" ></div> <div class= ' modal-content ' id= ' Yo Urmodalcontentid ' > <ul>            ...        </ul> </div></div>/*JS Code*/functionAddevt (DOM) {Dom&& dom.addeventlistener (' Touchmove ', Ontouchmove);}functionOntouchmove (e) {e.preventdefault (); e.stoppropagation ();}functionfn () {Let overlaydom= Document.queryselector (' #overlayId '); Let Modaldom= Document.queryselector (' #YourModalContentId '); Let Scroller=NewIscroll (Modaldom, youroptions);}

Is the above marked red sentence, but under normal circumstances stoppropagation is to stop the event bubbling, the author began to think it should be no relationship, but after repeated testing found that. There is no problem with the internal DOM scrolling, but with that sentence, the interior cannot be scrolled. After careful thinking, I think. It is mostly the implementation mechanism within the iscroll.

So read the next iscroll source, found Iscroll in Initevents did a magical operation:

_initevents:function(remove) {varEventType = 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); }

The target of Touchstart, Touchmove, and Touchend is window! in the case where the applicable party does not enforce binding wrapper See here Smart you may have reacted, this is why we usually write the touch event code after moving out of the scope of the DOM can not be normal release, and Iscroll can be. Because except for Touchstart, other events are added to the global Window object, and the actual problem we are experiencing is the use of the Touchmove event, and the hierarchical relationship of event triggering becomes:

/* DOM schematic */ window   // iscroll processing Touchmove  // block event bubbling // block event bubbling ----iscrollelement

We need to wait for events to bubble up to the window to properly handle Iscrollelement's touchmove behavior and see here. The author's heart is also deeply "this is a great big black dragon ah". But it is also because on weekdays too much emphasis on problem-solving, but not careful study of the principle and mechanism of the problem-solving method.

Although their respective responsibilities are the basic demands of the modernization of the Division of labor, but sometimes know why it can be more valuable to improve our efficiency, for us to solve practical problems, but also quite beneficial.

"JS" and the realization of modal frame of mobile end