Quiero enviar una solicitud de publicación (con una carga útil) a mi servidor cuando un usuario abre un enlace en mi aplicación React.
Mi enfoque actual es usar las devoluciones de llamada onClick y onAuxClick , y luego filtrar los clics con el botón derecho (porque esos no abren enlaces directamente).
<a href={link} target="_blank" rel="noopener noreferrer" onClick={onLinkClicked} onAuxClick={onLinkClicked}> <FaExternalLinkAlt className={styles.headerButton} /> </a> function onLinkClicked(event: MouseEvent) { if ([0,1].includes(event.button)) { alert('track click') } }Sin embargo, los clics con el botón derecho seguidos de la apertura del enlace a través del menú contextual también se ignoran.
Otra opción parece ser usar la devolución de llamada de ping . Sin embargo, hay dos problemas con esto: Ping no parece contener una carga/cuerpo, que necesito. Y el soporte del navegador parece ser escamoso.
¿Cómo puedo realizar un seguimiento fiable de los clics en enlaces sin falsos positivos y sin ignorar la apertura del enlace a través del menú contextual (y cualquier otra forma de abrir un enlace)?
Puede forzar la apertura del enlace incluso si el usuario hace clic en el botón incorrecto y con eso asegura el recuento real de clics
Por alguna razón, el evento del menú contextual se activa dos veces, por lo que le aconsejo que maneje ese problema. Intenté eliminar la propagación del evento e investigarlo y no encontré nada.
const a = document.querySelector('a'); // left, right, middle Clicks const events = ['click', 'contextmenu', 'auxclick'] // You can add more events if you feel the need to const cb = (clickType, elem) => { console.log(clickType); console.log(elem.href); // Open link and do the post request here } events.forEach(eve => { a.addEventListener(eve, (e) => { e.preventDefault(); cb(e.which, a); }) }) <a href="https://stackoverflow.com/">click</a>