Double click on mobile touch instead of one click

Questions
,
1

Hello,

I’m developing this webpage as a 360 virtual tour. my problem is when using mobile devices and touch screens, where I need to touch the screen twice to register a click. while on the website, you can see the yellow crystals that when clicked, it teleport you to the next 360 image, on PC it works perfectly but when switching to mobile you need to double-tab it to work! what is causing this issue?

Notes:

  • I’m using orbit controllers
  • GitHub for the code
  • I’ve noticed that if I click once and then click somewhere else the first click is removed and I need to click twice again … or it bugs out and teleports you (what I’m trying to say is, -I think- it has a random behavior)
  • I have implemented a click-and-drag check to determine if the user clicked or just wants to swipe and to prevent the code from clicking somewhere if the user wants to drag and “mouseup” landed on a clickable area … I’ve tested if that causing the issue but I don’t think so.

Thanks for the help!

2

That’s definitely an event listener problem, there must be some condition kicking in, I suspect while you are trying to make the deference between the click and drag, I tried to debug the webpage but the code is bundled and minified, try to debug in development mode open the console(F12) > source tab > Threads > Event Listeners Breakpoints and check pointer > pointerdown it should give an idea what’s happening under the hood.

3

@Fennec Thanks for the reply,

Now a couple of points:

I know the problem is somewhere in the event listener (unless you meant on ThreeJS side of the event)

I’ve completely removed the drag check, made a build and uploaded it to the server, and yet while using a mobile it needs a double click to register a click

For the debugging, the problem is while using a PC as in using a mouse, a single click is registered and has no problem and while creating a breakpoint at pointer up or down it breaks at the correct code line, that is at the event listener.

The problem is it only occurred while using a touchscreen, I’ve tested the page across multiple PCs and mobile devices, and tablets … all generate the same issue, PC works just fine, but mobile requires double clicks!

4

unless you meant on ThreeJS side of the event

It’s not a ThreeJS problem

For the debugging, the problem is while using a PC as in using a mouse …

You can simulate touch screen on PC with the console F12 > Ctrl + Shift + M, this way you can debug touch screen from your PC

1 Like
5

@Fennec

I’ve learned something new here, thanks. and yes when in this mode the issue occurs.

So you’ve led me to the solution, I had multiple problems with my code:

  • When checking for drag vs a click I used 3 variables var mouse; var mouseUp; var mouseDown mouse is on pointermove event to keep mouse X and Y updated, and mouseUp and mouseDown on each respective event and I take a copy of mouse. in touch, there is no pointermove event so it breaks the code, now I changed it to 2 vars and it records XY on the spot.
  • The drag margin was too small.
  • My raycast was using an old coords of the mouse.

I’ll try to update the gitHub page with the fix and some documentation on the problem.

1 Like
6

Glad to be of help

1 Like