反應如何防止在單擊孩子時觸發父母的 onclick 事件？

Question

我在我的 div 上設置了onClick道具，單擊該道具將導航到新頁面。 svg絕對定位。 如何避免svg元素上的點擊事件？

我已經嘗試過stopPropagation()但它不起作用。

<div
  className={classes.container}
  onClick={() => navigate(`${props.productName}`)}
>
  <img src={props.image} alt="" />
  <svg></svg>
</div>

Answer 1

那么顯而易見的答案是將它放在div之外。
但如果你真的不能，你總是可以為此使用 CSS 。

嘗試使用pointer-events

例子：

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;
}

Answer 2

檢查是否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>

Answer 3

你可以通過做這些來實現。

1. 觸發事件時檢查目標元素標簽。
2. 將 Id 分配給元素並根據 Id 執行代碼。
3. 使用 CSS 指針事件來禁用該元素的指針事件。