我的绝对位置的div受到其父项的clic的影响

Question

我正在尝试在其容器父级中创建一个具有绝对位置的简单自定义下拉列表，单击父级时必须显示该下拉列表。问题是，当我单击子项时，它会调用其父项的click方法。

单击绿色区域（父区域）。

function clickHere() {

  if (document.getElementById("drop").style.display == "block") {

    document.getElementById("drop").style.display = "none";

  } else {

    document.getElementById("drop").style.display = "block";

  }

}

<div style="background:red; height:500px;">

  <div onclick="clickHere()" style="margin:auto;height: 40px; width:30%; background:green; position:relative;">

    <div id="drop" style="display:none;width:100%; height:200px; background:blue; position:absolute; top: 100%; margin:0;">

      <h3 style="text-align: center; color:white;">Hello</h3>

      <h3 style="text-align: center; color:white;">Hello</h3>

      <h3 style="text-align: center; color:white;">Hello</h3>

      <h3 style="text-align: center; color:white;">Hello</h3>

    </div>

  </div>

</div>

Answer 1

将对处理程序的调用更改为clickhere（event）将clickhere函数更改为clickere（e），然后将对e.stopPropagation（）的调用添加到该函数。默认情况下，事件使层次结构冒泡。