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

Question

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

Answer 1

yes... completely different now.

Answer 2

looks good🤔
what is your problem?

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

I can only see a blank screen...

Answer 8

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";

Answer 9

Try this in your js part

Answer 10

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

Answer 11

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