Front-end notes for the first wave of internships

one, Preventdefault () and stoppropagation () distinguishEvent Capture phase: 1, 2, 3in Target stage: 4Event Bubbling stage: 5, 6, 71.preventDefault () represents the default behavior for blocking specific events. For example, the behavior of the linked navigation behavior, submit submission form. Preventdefault () does not prevent events from further capturing or bubbling, nor does it prevent custom events. 2. The "DOM2 level event" defines the AddEventListener ("click", Function () {},false) method. The third parameter, True, indicates that the event is handled during the capture phase, and False indicates that the event is processed during the bubbling phase. 3.e.stoppropagation () prevents the event from being further captured or bubbled, the current event is executed, and subsequent events will not be triggered. However, if you define events for the capture phase (the third argument is true) and the bubbling phase (the third argument is false), the two events are executed.   Second, the pop-up content display is not complete the perfect solutionproblem Description: An issue in which the popup content appears incomplete when clicked on a list item near the bottom of the screen in the project. As shown, when you click on the position record, the "open position-close position-market" bar appears incomplete. to ensure that the bottom of the shell can be blocked in any case can be normal display, need to undergo some calculation processing, the detailed page height is very complex, details see the bottom of the analysis chart, here only to describe the use of the height value. The processing methods are described in detail below. The results can be seen in the "Niu Times" futures and a-shares of the profit and loss list. 1. Determine if the hit list item will not be displayed in full:Top offset of list item + height of list item + ejection height > window bottom offset2. If 1 is false, then let the pop-up drop-down by default (this default pop-up is in line with the user's habits). 3. If 1 is true, then let the list item scroll up and pop the bar, and let the bottom of the pop-up just stick to the bottom of the window and calculate the distance to scroll up:scroll up distance = top offset of list item + height of list item + projectile height-offset at bottom of window4. Replace all variables in the formula with the actual properties:Top offset of list item: $listitem. Offset (). Top;(Note: offset () is the method of calculating element offsets for jquery)height of list item: $listitem. Offset (). Height;height of the projectile: $outitem. Offset (). Height;window Bottom offset: $ ("body"). ScrollTop () +document.documentelement.clientheight;(Note: Window bottom offset = window scroll down offset + window height)(tips: Total height of the page: document.body.clientHeight;)5. Get the final relevant code as follows:

//Calculate the bottom offset of the window            varpage_top=$ ("Body"). ScrollTop () +Document.documentElement.clientHeight; //calculate top offset of list items            varelement_top=$n. Offset (). Top; //Calculate list Item Height            varelement_height=$n. Offset (). Height; //calculates the scrolling distance, 40 is the height of the projectile            vardistance=40+element_height+element_top-Page_top; //Scrolling Distance <0 Description can be fully displayed without scrolling, scrolling distance >0 need to scroll            if(distance>0){                //Scroll up, scroll distance is distance            }   

the difference between three, $ (this) and thisthis points to the object that invokes the method, can call the JS method, gets the HTML element property, and cannot invoke the jquery method. $ (this) encapsulates this as a jquery object, making it possible to invoke the JQuery method, not directly fetching HTML element attributes, and not invoking the JS method.    Four, threading strange elephant, simple processing uses settimeout ()The browser has three basic threads: a JS thread, a GUI thread, and a request thread. JS itself is single-threaded, AJAX-implemented asynchronous requests are based on the mechanism of the browser itself, and the JS thread and the GUI thread are mutually exclusive (future detailed analysis of the browser stack, thread relationships). Two odd questions were encountered in the project, and the reasons for these two problems have so far only remained in the speculative phase. The first is that some input methods exist to confirm the input stage, at this stage using JS to perform the input-based view operation will be two times the strange image of the refresh, another problem for the "No open position" content in a A-share after the 20% chance of overwriting the rendering, resulting in "No open position" disappears, The current consideration is caused by some asynchronous operations in the framework used. This kind of strange problem I present the solution is settimeout () delay execution, when the set timer in a time period (about 300 milliseconds), the operation will not be overwritten. While the problem is temporarily resolved, using settimeout () will make the timing of the program more confusing, making future errors more difficult to analyze and capture, so it is not recommended for long-term considerations.    Five, mobile phone-side three equal button compatibility issues summaryproblem Description: The most primitive transduction CSS style for the related bug:22990,24476,24842 is:

. Ranking-tab{position:relative;width:5.97rem;Height:0.58rem;margin:0.15rem Auto;Line-height:0.58rem;text-align:Center;Border:1px solid #fa5d5d; }. Ranking-tab Li{position:relative;Height:100%;float: Left;background:#fff;Border-right:1px solid #fa5d5d;box-sizing:Border-box; }. Ranking-tab Li:last-child{Border-right:None; }. am-grid-item-33{width:33.333%}

This design, "This Day", "This Week", "Total" ranking buttons occupy a line width of 33.333%, in some small screen phones can be normal display, but in the similar to Iphone6, Samsung S6 such as the big screen phone will appear on the problem, a small white edge on the right side, The reason is not full. 1. The first modification scheme is to set the width of the "Total ranking" button to 33.334%, so that three buttons add up to be covered with 100% width. 2. But the problem is not solved. Android big screen mobile phone after such changes can be normal display, and iphone6 remains unchanged, the right side will still appear white edge. After testing, it was found that iphone6 cannot recognize the number of the CSS style decimal 3 digits (including the 3rd digit), so the width of the "Total ranking" button is changed to 33.34% and the big screen phone is all normal (although the total width of the three buttons is more than 100%, However, they are still displayed on one line through the Box-sizing property. 3.iphone4 the right white edge problem, try to set the total width to 6em, each button is set to 2em width, and all 33.333% is not any different, also adopted the Flex layout scheme, but there are still compatibility issues. Using a compromise approach, set the background color to red, but did not solve the problem from the root, the effect4. Eventually such mend modifications pass the test, or the CSS code is analyzed from the most basic underlying. There are many types of mobile phones in the world, in order to layout based on the three equal, using 33.333% is very risky, maybe some phones only support 33%, then the right side will appear 1% edge. So the original UL border set to Li, so even if Li did not on some special models 100% filled with UL, we see the effect is still normal, the background will be integrated with UL. The final layout scenario is as follows:

. Ranking-tab{position:relative;width:5.97rem;Height:0.58rem;margin:0.15rem Auto;Line-height:0.58rem;text-align:Center; }. Ranking-tab Li{position:relative;Height:100%;float: Left;background:#fff;Border:1px solid #fa5d5d;Border-right:None;box-sizing:Border-box; }. Ranking-tab Li:last-child{Border-right:1px solid #fa5d5d;}. am-grid-item-33{width:33.333%}

One of the things worth explaining is that you must set:

Li { border-right:none;} Li:last-child { border-right:1px solid #fa5d5d;}

If this is not done, the right border of the previous button will coincide with the left edge of the latter button and become 2px. at this point, after a large circle of detours, the ranking page key compatibility problem solved completely.   

Front-end notes for the first wave of internships