时间戳

首页 > 解决方案 > HTML：如何使点击监听器忽略放置在图标上的不可见按钮

javascript - HTML：如何使点击监听器忽略放置在图标上的不可见按钮

问题描述

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

<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())

还有另一种方法吗？

标签： javascripthtmlcssaddeventlistener

解决方案

尝试这个：

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

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

推荐阅读