Touch-screen RIA development: zepto upgrade to simulate user behavior

First, introduce background to old habits:

When developing HTML5 music to play Ria, miss Ben found a strange problem in IOS Safari:

 
1 //CodeThe premise is that zepto. JS is referenced.2 VaRAudio = $ ("audio") [0];3Audio. src = "testaudio";4Audio. BIND ("tap ",Function(E ){5 Audio. Play ();6})
 

The zepto tap is invalid !!! What's going on? After a lot of breakpoints are added, it is found that the TAP event is not invalid, but the audio in the callback function of the TAP. play () becomes invalid. There is no problem with chrome, UC, and PC for Android. Safari, t ^ t, and depressing .... After carefully studying the source code of zepto, we found that all events in zepto use the setTimeout function that jumps out of the thread. Then, we have the following guesses:

Due to the setTimeout relationship, the browser regards the triggering of this event as JS Code behavior rather than user behavior, and the media tag for HTML5 (<audio> <video>) safari has a strange security restriction: it is not a user's direct behavior environment and cannot call APIs of media tags. If this assumption is true, bind the touchend event directly. Audio. Play () should be executable.

The next verification proves miss Ben's speculation ~ So, how can we solve this problem.

That is, to simulate user behavior for zepto upgrade:

The general idea is that when a user triggers an event, we create a DOM object, bind an event to the user, and simulate the user's method to trigger the event.

Zookeeper zookeeper ~~~~ The Code is as follows:

 1   Function  Simuevent (callback ){  2       VaR A = Document. createelement ('A');  3 A. On ('click ', Function  Handler (e ){  4           This . Off ('click' , Handler );  5   Callback ();  6 }, False  );  7       VaR E = Document. createevent ('mouseevent' ); 8 E. initmouseevent ('click ', True , True , This , 0, 0, 0, 0, 0, False , False , False , False , 0, Null  );  9   A. dispatchevent (E );  10 }

So how to use it?

If you need to bind events related to APIs of media tags, you can use the callback function when binding events. The original code is modified as follows:

 
1 //The premise of the code is to reference zepto. js2 VaRAudio = $ ("audio") [0];3Audio. src = "testaudio";4Audio. BIND ("tap ",Function(E ){5Simuevent (Function(E2 ){6 Audio. Play ();7 });8})
 

now, we can bypass the strange Security Mechanism of safari and cheat silly browsers, haha.