javascript - HTML:如何让 clicklistener 忽略放置在图标上的不可见按钮

Question

我正在尝试制作一个模态窗口，该窗口通过单击下面代码中的问号图标触发。

<label class="control-label col-md-4 col-lg-3" for="offer_offer" id=Angebotlbl>
   <div class="inline-help form-label" ><i class="fa fa-question-circle-o" id="AngebotHilfe"></i>
      <button id="hilfeBtn" data-modal-target="#modal"></button>
   </div>Angebot</label>

我不太了解 HTML 或 .css。在尝试使该图标可点击但失败后，我考虑创建一个透明/不可见的按钮并将其放在该图标的正上方。 .css 看起来像这样:

#hilfeBtn {
        background-color:Transparent;

  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 12px 12px 12px 12px;
  border: solid #1f628d 0px;
  text-decoration: none;
      position:absolute;
    top: 22%;
    left: 5%;
}

##hilfeBtn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

但我的计划可能很愚蠢。因为现在我无法真正将事件监听器添加到上面的图标“Angebothilfe”，而事件监听器不会忽略其顶部的不可见按钮。我的事件监听器看起来像这样:

formElements[i].addEventListener("click", function(event) {
        focusFunction(event);
    });

function focusFunction(event) {
      console.log("clickedOn," +event.target.id+","+ Date.now())

还有其他方法吗？

Answer 1

试试这个:

<div class="inline-help form-label" onclick="myFunction()" >
  <i class="fa fa-question-circle-o" id="AngebotHilfe"></i>
</div>

“myFunction()”会做任何你想做的事。