Thoughts triggered by _html/css_WEB-ITnose

A while ago, in a mobile project, a form was submitted by binding the click event by . Since the form information is relatively sensitive, post synchronization was adopted. The way of submission was originally nothing. Later, the evil PM said, "It's better to fix this button at the bottom." So it was fixed to the bottom through position:fixed. Then, here comes the problem. Under iOS, the virtual keyboard floats on the top of the page. The result is that when the keyboard is retracted, the button floating at the bottom is no longer at the bottom, but in the middle. (Under extreme conditions It may also block the input box and make it impossible to input), and it will scroll as the screen scrolls, (the performance is similar to absolute), and the tall Apple is really cheating.

What to do? There are two options. One is to dynamically calculate the position when scrolling, and real-time monitoring of the position must consume performance. The other is because it is impossible to monitor whether the virtual keyboard is opened or closed, so the button position can only be changed by binding focus and blur events to the form element. to achieve the desired effect. So balabala was finished again.

After finishing it, I started testing, and found that when an input element is in focus, clicking the submit button does not work! ! ! I'll order it again, okay. . .

The reason is because the blur event will prevent the execution of the click event. . .

OK, I will continue to change.

The blur event will prevent the execution of the click event, but it will not prevent the touch event, so I thought of changing click to tap. It really works. No more clicking twice.

It’s done, I smile proudly, I’m so smart.

Balabala is now online.

Once I went online, I found that I could not submit. . . There is a certain probability that the request will be canceled. . .

All kinds of Google did not find the reason, where is the question? There is no problem with click, but there is a problem when changing to tap, so I checked the execution order of touch event, which is roughly like this

　

So I tested mouseup and it was good, touchend also worked. There is a problem, there is also a problem with tap, and when I use the tap event, the handler delays 100ms and then $('*Form').submit() can submit normally again. It turns out to be a problem with the timing of submit execution.

Continue to debug and catch bugs, pitfalls left over from history,

Finally, is executed, when the button click event is executed, in the request Submit is executed before the hash, and the request has not been returned. Due to the change of hash, the synchronous submit was canceled. However, due to various reasons before the submit execution, if the hash has been changed, it can be submitted smoothly.

So, changed to Finally everything was fine.