Estoy tratando de distinguir entre los clics izquierdo y derecho en una función onClick :
const App = () => { const handleClick = (e) => { // detect a left click if (e.which == 1){ // do something } }; return <p onClick={handleClick}>Something</p>; }; Resulta que e.which no está definido para los eventos sintéticos . ¿Cómo puedo distinguir entre los clics izquierdo y derecho aquí?
En las versiones modernas de React (v16+), se deben pasar los accesorios onClick y onContextMenu para detectar eventos de clic izquierdo y derecho:
return <p onClick={handleClick} onContextMenu={handleClick}>Something</p> Puede verificar contra e.nativeEvent.button (como lo implica la otra respuesta), o verificar e.type en el evento sintético en sí.
Usando e.type
const handleClick = (e) => { if (e.type === 'click') { console.log('Left click'); } else if (e.type === 'contextmenu') { console.log('Right click'); } }; Usando e.nativeEvent
const handleClick = (e) => { if (e.nativeEvent.button === 0) { console.log('Left click'); } else if (e.nativeEvent.button === 2) { console.log('Right click'); } };Aquí hay una demostración actualizada que demuestra cómo funciona esto.
También puede leer la documentación de React para SyntheticEvent .
La propiedad que está buscando es e.button o e.buttons .
El número de botón que se presionó cuando se disparó el evento del mouse: botón izquierdo = 0, botón central = 1 (si está presente), botón derecho = 2.
– MDN:Web/Eventos/clic
Sin embargo, con o sin reacción, solo obtengo eventos de clic con el botón izquierdo del mouse (panel táctil). Podrías usar onMouseDown que funciona para mí.
Aquí hay una demostración usando e.buttons . Es posible que desee prevenir Predeterminado en onContextMenu también.
Usar:
if (e.button === 0) { // or e.nativeEvent.which === 1 // do something on left click }