1 First, mobile 300ms latency
About 300ms delay This URL: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/has a detailed description of the solution, which is not mentioned here, due to project requirements, I tested it again. The trigger sequence test code for the client Touchstart Touchend Click Three events is as follows:
<body><div class= "btn" ></div><div><label>touchstart:</label><span class= "Start" ></span></ Div><div><label>touchend:</label><span class= "End" ></span></div><div ><label>click:</label><span class= "click" ></span></div></body><script Type= "Text/javascript" >var btn = Document.queryselector ('. btn '); var img = document.queryselector (' img '); var start = Document.queryselector ('. Start '); var end = Document.queryselector ('. end '); var click = Document.queryselector ('. click Btn.ontouchstart = function () {start.innerhtml = Date.now (); Img.setattribute (' src ', './img/pointer-click.png ');} Btn.ontouchend = function () {end.innerhtml = Date.now (); Img.setattribute (' src ', './img/pointer-normal.png ');} Btn.onclick = function () {click.innerhtml = Date.now ();} Test results touchstart:1466823602 819
touchend:1466823602 876
click:1466823602 879
The newest version of the Andro browser and the latest iphone browser test results are similar, the Touchend and click event Trigger interval is very short, the user can not be clearly perceived, but in order to be compatible with the previous version of the use of click is best to use the Fastclick to resolve the delay time.
2 Simulation Click on the effect of the process I used to switch the image to implement the initial code, such as, but in the course of testing found that a large part of a certain browser does not achieve this effect, and then began to analyze the reason, after setting the image src, i print the image src, found that SRC is changed, But the picture did not switch successfully, I think it should be the picture loading problem, so I pre-loaded the picture, the code is as follows:
var preload = new Image ();p reload.src= './img/pointer-click.png ';p reload.onload = function () {Btn.ontouchstart = function () {start.innerhtml = Date.now (); Img.setattribute (' src ', './img/pointer-click.png ');} Btn.ontouchend = function () {end.innerhtml = Date.now (); Img.setattribute (' src ', './img/pointer-normal.png ');} Btn.onclick = function () {click.innerhtml = Date.now ();}}After the test, it was successful.
Use the picture Touch Event simulation button click Effects && picture preload
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
