He estado tratando de arreglar esto durante horas. Encontré este problema originalmente en iOS para un sitio web que había lanzado. He probado con el siguiente código y funcionará el 90% de las veces, pero al azar no funcionará.
<button className="p-8" onClick={() => (console.log("successful click"))}>test</button>Utilizo tailwindcss, pero he intentado agregar el estilo de cursor: "puntero" al botón y los divs principales, que no cambiaron nada. He intentado agregar una identificación con un javascript addEventHandler separado, que no cambió nada. Intenté agregar onClick="void (0)" a los divs principales y secundarios, que no hicieron nada, intenté llamar a onTouchStart junto con onClick, lo que resolvió un poco este problema pero causó otro problema en el que se hacía doble clic en las cosas. He intentado TODO lo que pude encontrar en Internet y nada funciona.
Me lo imaginé. Al inspeccionar la página, vi que varios de mis botones parpadeaban en el panel de 'elementos'. Tenía una función separada que se llamaba una vez por segundo que actualizaba el estado de un número (tengo un temporizador de cuenta regresiva en mi página) que no tenía ninguna relación con este botón.
Actualizar el estado de ese elemento estaba causando que cada botón se volviera a procesar cada segundo, lo que toma milisegundos, pero si hacía clic derecho cuando se procesaba, no haría nada. Eliminar la lógica del temporizador setState() en realidad resolvió todos mis problemas con el clic.