javascript - 子元素点击也触发父元素 - Reactjs

Question

代码如下

<ul className="sb-modules-list">
    <li key={index} className={this.getModuleClass(module)} onClick={() => { alert(127) }}>
        <ul className="sb-module-steps-list">
           { module.steps && module.steps.map((stepInfo, stepIndex) =>
               <li key={stepIndex} className={this.getStepClass(stepInfo)}  onClick={() => { alert(456) }}>
                        <p>{stepInfo.short_title}</p>
                      </li>
                      )}
         </ul>
</ul>

问题是，当我点击最里面的子标签 li 时，它会触发子标签和父标签的 onclick 事件。

例如，在这种情况下，点击会触发 alert(456) 以及父函数 alert(123)；

我不希望在单击子项时运行父方法。知道如何解决这个问题吗？

Answer 1

您可以使用 event.stopPropagation()以防止事件冒泡。考虑这个点击处理程序的例子:

const handleClick = (event, value) => {
    event.stopPropagation();
    alert(value);
}

然后你可以像这样使用它:

<li onClick={event => handleClick(event, 127)}></li>