javascript - 从 div 内部和外部调用不同的函数

Question

我在一个 div 中有一个 div。我想在单击外部 div 时调用一个函数，在单击内部 div 时调用另一个函数。有可能吗？

<div onclick="function1()">
<div onclick=function2()></div>
</div>

Answer 1

是的，这是很有可能的。您拥有的代码将完成工作。

注意:您需要添加 event.stopPropagation() 以防止事件从内部函数冒泡。

试试这个:

function function1() {
  console.log("From outer div");
}

function function2(event) {
  console.log("From inner div");
  event.stopPropagation();
}

#outer-div {
  width: 100px;
  height: 100px;
  background: yellow;
}

#inner-div {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  top: 25px;
  left: 25px;
}

<div id="outer-div" onclick="function1()">
  <div id="inner-div" onclick="function2(event)"></div>
</div>