Is there a way to detect child elements inside parent when ontouchmove event handler is attached to parent? [Solved]

Question

So here "main" is the parent div to which ontouchmove handler is attached ,and its child are 1800 div with different Colors ,when I move across the main div ,only first element is detected ,

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

Answer 1

It appears you can't get the element that a touch moves over to a touchmove event in a straightforward way. After some googling, I have found it is possible to take the coordinates of a touchevent, and find which element is at that point. Try changing your ontouchmove event handler to this:

m.ontouchmove=(e)=>{
let x = e.touches[0].pageX;
let y = e.touches[0].pageY;
var cl=getComputedStyle(document.elementFromPoint(x, y)).backgroundColor;
c_color.style.backgroundColor=cl;
}

Answer 2

No worries. An extra tip; if you add e.preventDefault(); to the touchstart function, you can stop the screen scrolling as you drag your finger around. 👍

Answer 3

Russ thank you so much !

Answer 4

Russ wow I came across that attribute but didn't cared about how would it helped me ,but it's really a nice way to stop scrolling of screen ,ty again