Configuré el accesorio onClick en mi div que navegará a una nueva página cuando se haga clic. svg está absolutamente posicionado. ¿Cómo evito el evento de clic en el elemento svg ?
Ya probé stopPropagation() pero no funciona.
<div className={classes.container} onClick={() => navigate(`${props.productName}`)} > <img src={props.image} alt="" /> <svg></svg> </div>Bueno, la respuesta obvia sería ponerlo fuera del div .
Pero si realmente no puedes, siempre puedes usar CSS para esto.
Intenta usar pointer-events
Ejemplo:
html-
<div className={classes.container} onClick={() => navigate(`${props.productName}`)} > <img src={props.image} alt="" /> <svg className='no-events'></svg> </div>CSS-
.no-events { pointer-events: none; }Compruebe si e.target === e.currentTarget .
function Example() { function handleClick(e) { if (e.target === e.currentTarget) { console.log('Only container clicked'); } } return ( <div className="container" onClick={handleClick} > <button>Click me!</button> </div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); #react { padding: 0; border: 0; margin: 0;} .container { border: 5px solid white; padding: 1em; background-color: lightblue; } div:hover { border: 5px solid cornflowerblue; } div:hover, button:hover { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Puedes lograrlo haciendo esto.