如何管理两个不同元素上的事件

Question

我创建了这个例子来重现我的问题。

基本上，我有一个由文本和一个"；图标"；(i按钮(。我需要的是当用户单击i和当用户单击容器内部(避开i(时触发两个不同的事件。问题是idiv在容器中，所以我不知道如何拆分这两个事件。

在我的代码中，当我点击卡片时，我得到：

card

是的，当我点击"I"时，我得到：

info!
card

但它应该只是

info!

我该如何修复？我打开了更改html结构的

Answer 1

这是javascript事件的默认行为。在这3个阶段中，当事件触发时发生

1. 捕获阶段(JS从窗口、文档开始，然后是每个元素，直到到达事件目标(
2. 目标阶段(在触发事件的目标元素处(
3. 冒泡阶段(JS遍历每个HTML元素，从目标开始，返回窗口(

您需要stopPropagation，这样container的事件就不会执行。设计和框

Event.stop传播

function clickHandler( e ) {
e.stopPropagation();
console.log( e.target );
}

以及在JSX 上

return (
<div className="container" onClick={clickHandler}>
<div className="first-line">
<div className="header">
<div className="title">title</div>
<div className="circle" onClick={clickHandler}>
i
</div>
</div>
<div className="subtitle">
Lorem ipsum dolor sit amet, consecte adipiscing elit
</div>
</div>
<div className="second-line">Link to section</div>
</div>
);