Question

每当单击一个Div时，我都试图触发一个功能，但是该Div具有一个内部Div，这意味着如果我在内部单击它，它将触发onClick但在错误的Div上触发

我已经在Internet上四处张望，但找不到任何答案。

返回下面代码的地图函数

<Card onClick={props.setSelectedTemplate}  key={template.id} className="AdCopies" id={template.id.toString()}>
        <SimpleAdCopy headlines={template.headlines} descriptions={template.descriptions} url={'www.google.com'}/>
 </Card>

function handleClick(event) {
    console.log(event.target.id)
  }

即使我单击内部Div，我也需要始终将单击限制在外部div上。

Answer 1

您要使用event.currentTarget而不是event.target。 target是单击的对象，currentTarget是事件绑定到的元素。

Answer 2

据我了解，这是关于React的，不是吗？无论如何，如果您想停止事件冒泡（https://www.sitepoint.com/event-bubbling-javascript/），则应在内部div中添加onClick处理程序，并在回调内部执行类似的操作

<SimpleAdCopy onClick= {event => event.stopPropagation()} />

它停止事件冒泡，并避免在外部div上进行onClick调用

关于停止传播：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

是否可以将内部Div Click绑定到外部Div？

2 个答案: