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

您可以将click事件传递给回调函数。然后，您可以检查event.target元素并对其作出反应，返回false则不执行任何操作或继续执行代码。

为了便于演示，我只是检查元素上是否设置了单击处理程序，但是由于您以后可能还会在子元素上使用单击处理程序，因此您可能需要检查{{1} }，event.target.tagName特定的类名或任何其他独特功能。

如评论中所建议，另一种可能性是在子元素上注册一个侦听器，然后调用event.target.id，但是使用这种方法，一个侦听器就足够了。

event.stopPropagation()

function clickHere(event) {
  var target = event.target;
  if (!event.target.onclick) return false;
  
  if (document.getElementById("drop").style.display == "block") {
    document.getElementById("drop").style.display = "none";
  } else {
    document.getElementById("drop").style.display = "block";
  }
}

Answer 2

将对处理程序的调用更改为clickhere（事件）

将clickhere函数更改为clickere（e），然后向该函数添加对e.stopPropagation（）的调用。

默认情况下，事件使层次结构冒泡。

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

2 个答案: