单击按钮时如何覆盖div onClick事件？答案

【问题标题】：How to override div onClick event when button is clicked?单击按钮时如何覆盖div onClick事件？
【发布时间】：2021-08-05 22:03:44
【问题描述】：

当单击子删除按钮时，我试图阻止父 div 执行 onClick 事件。

<div>
    {notes.map((val) => {
       return 
      <div key={val.id} onClick={() => Logic.selectNote(val.note, val.id)} className="editorDiv">
      <Delete className="delBtn" onClick={(e) => del(e, val.id)}></Delete>
      <ReactQuill className="note" value={Logic.limitDisplayText(val.note)} readOnly={true}  /></div>
    })}
</div>

我尝试实现event.stopPropogation，但是它给了我一个错误。

function del(e, noteId) {
        e.stopPropogation()
        localStorage.removeItem(noteID)
    }

【问题讨论】：

我将它传递给一个函数以删除该项目。
您不能在另一个可点击区域内下一个可点击区域。这永远不会起作用，并且在 HTML 中无效。使用 CSS 使项目看起来像在另一个区域内，但构造 HTML 以便两个可点击项目彼此相邻而不是嵌套。
@Dominik - 当然它是有效的，并且经常发生。（可以说，在特定情况下，甚至在一般情况下，这样做是不明智的 - 但它肯定不是无效的 HTML。）你确实需要 stopPropagation 方法 - 遗憾的是，OP 只是说“它给了我一个错误”没有显示他们尝试使用它的代码。你需要类似onClick={(e) => {e.stopPropagation(); del(val.id);}}
@RobinZigmond 你是对的，它现在可以工作了。我复制了你的拼写，发现我把stopPropagation 拼错了stopPropogation。谢谢。如果是拼写错误，我应该留下我的问题吗？
在这里找到你的答案。与事件冒泡有关。 stackoverflow.com/questions/38619981/…

标签： javascript html reactjs

【解决方案1】：

如果有人和我有同样的问题，只需使用e.stopPropogation()。这会阻止点击事件冒泡到其他 HTML 元素。以为我会添加它作为答案以使其清楚。

【讨论】：