DEV Community

Discussion on: Let's build an actual working Guitar🎸 with JavaScript 💻🤘

View post
Collapse
 
isitar profile image
Isitar (Pascal Lüscher) •

Next project: Mobile support :)

Collapse
 
thormeier profile image
Pascal Thormeier •

That's a bit tricky, actually! touchstart and touchend can be used to replace the click, mousedown and mouseup events on mobile, but there's no equivalent of mouseover for touch events. But I could try touchemove, that might work. Got any other idea how to solve this?

Collapse
 
isitar profile image
Isitar (Pascal Lüscher) • • Edited

I guess touchmove is the only option you got here. Since you already have x,y,width and height on your strings you can map the x and y of your touchmove event to the appropriate area. The simplest approach would be to select all areas and filter

const area = document.querySelectorAll('rect')
    .find(area => event.x >= area.x 
        && event.x <= area.x + area.width 
        && event.y >= area.y 
        && event.y <= area.y + area.height
    )

area.click();
Enter fullscreen mode Exit fullscreen mode

(maybe double check that y condition if y is not 0 on the top left ;), also maybe double check the borders and substitute <= with < or >= with > )

Thread Thread
 
thormeier profile image
Pascal Thormeier •

This could also be used to replace all the click handlers on all the rects and improve performance a bit on slower devices, too! I'll definitely do that in the second version of this.