Thoughts Caused by & lt; a href = & quot; # & quot; & gt,

Thoughts Caused by <a href = "#">,

Previously, in a mobile project, the <a href = "#"> method is used to bind a click event to submit a form. Because the form information is sensitive, as a result, the post synchronous submission method has nothing to do with it. Later, the evil PM said, "It's better to fix this button at the bottom." The result is fixed to the bottom through position: fixed. In ios, the virtual keyboard is floating on the upper layer of the page. The result is that when the keyboard is collapsed, the buttons floating at the bottom are not at the bottom, in the middle of the page, (in extreme conditions, the input box may be blocked and cannot be entered), and the page will scroll as the screen rolls. (similar to absolute ),, the apple on the tall end is also a real pitfall.

What should we do? Two solutions: one is to dynamically calculate the location when rolling, and real-time monitoring location must consume performance. The other is that the virtual keyboard cannot be monitored to open or close, therefore, you can only bind the focus and blur events to the form element to change the button position to achieve the desired effect. So balabala finished again.

After the test is completed, start the test and find that when an input element is in the focus state, click the submit button, which is invalid !!! I'll try again, okay...

The reason is that the blur event will block the execution of the click event...

OK. I will continue to change it.

The blur event will block the execution of the click event, but will not block the touch event, so remember to change the click to tap. It's really good. You do not need to click twice.

I'm so proud to smile. I'm so smart.

Balabala is now available.

I cannot submit it when I am online... There is a probability that the request is canceled...

Why did google find out? What is the problem? Click is no problem. If it is changed to tap, there is a problem, so I checked the execution sequence of the touch event, which is roughly like this.

　　

So I tested mouseup, And the touchend was faulty. The tap was also faulty. When I used the tap event, handler delays processing by MS and then $ ('* form '). submit () can be submitted again normally. It turned out to be the timing of submit execution.

Continue to catch all kinds of debugging bugs ,,

Finally, it is <a href = "#">. When the button is clicked to execute the event, submit is executed before the hash request. The request has not been returned because the hash is changed, the synchronized submit is cancel, and the hash can be submitted smoothly if it has changed before the submit is executed for various reasons ,,

 

Then, change <a href = "#"> to <a href = "javascript: void (0)"> everything is done.