反应如何防止在点击孩子时触发家长的点击事件？

Question

我已经在我的div上设置了onClick道具，单击后将导航到新页面。CCD_ 2处于绝对位置。如何避免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指针事件禁用该元素的指针事件