Why aren't touch events working flawlessly? [Solved] | Sololearn: Learn to code for FREE!

+3

Why aren't touch events working flawlessly? [Solved]

So here is a code I wrote(2 months ago) to test touch events which worked fine and rectangles were drawn one after other smoothly with no gap between them ,but it looks worse now , https://code.sololearn.com/WW7UkbZF1KcI/?ref=app

9/25/2020 8:33:37 PM

Abhay

11 Answers

New Answer

+8

yes... completely different now.

+3

looks good🤔 what is your problem?

+3

Abhay ok clearer to me... I have one idea that smartphone has become slow🤔 Maybe some others test it.

+2

https://code.sololearn.com/WGwZ6xuK5aJ6/?ref=app

+1

Frogged that doesn't looks good with gaps between those triangles ,also when you move fingers fast things become much worse ,I am not sure why you think it looks good I can only think of two possibilities Either touchevents are longer supported by my browser ,or deprecated but not sure what changed in 2 months Here is another code that is no longer of any use ! https://code.sololearn.com/WHGX1dAI1cTm/?ref=app

+1

Frogged works fine now after setting touch-action to none ,browser drag event and other events were kicking in whenever move event starts thus interrupting or even cancelling it , touch-action:none prevents them all

+1

I can only see a blank screen...

0

window.onload=function(){ var t_count=[]; window.ontouchstart=(e)=>{ try{ if(e.touches[0] && e.touches[1]){ console.log(e.touches[0].clientX,e.touches[1].clientX); t_count.push(1); };} catch{console.log(error)} }; window.ontouchmove=(e)=>{ if(e.touches[0] && e.touches[1]){ console.log(e.touches[0].pageX) el=document.createElement("div") document.body.appendChild(el); el.style.position="absolute"; el2=document.createElement("div") document.body.appendChild(el2); el2.style.position="absolute"; el.style.left=(e.touches[0].clientX-50).toString()+"px"; el.style.top=(e.touches[0].clientY-50).toString()+"px"; el2.style.left=(e.touches[1].clientX-50).toString()+"px"; el2.style.top=(e.touches[1].clientY-50).toString()+"px"; el.style.border="2px solid black"; el.style.height="100px"; el.style.width="100px";

0

0

Priyanshu Gupta(प्रियांशु गुप्ता) read the answers above,it has been solved ,the problem was the browser events interfering with the ontouchmove event ,setting touch-action to none prevents them

0

Abhay it is good that problem has been solved . I am just giving my solutions