主页 / 问题 / 1147670
Accepted
Максим Сиваконь
Asked:2020-07-01 14:18:53 +0000 UTC2020-07-01 14:18:53 +0000 UTC

onclick 事件未触发

  • 772

写了代码。在给定元素外部单击时执行打开模式、关闭和关闭的任务。

问题在于未处理的事件btnActionClose.onclick = btnAction;，它没有解决。

如何使用 JavaScript 智能地解决这个问题？

    btnActionOpen.onclick = btnAction;
    btnActionClose.onclick = btnAction;

    modalItem.onclick = function (e) {
        if(e.target !== modalItemContent)
            btnAction();
    }

    function btnAction(){
        var modalItem = document.getElementById("modalItem");
        modalItem.classList.toggle("activity");
    }
#modalItem{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    margin: auto;
    visibility: hidden;
    opacity: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.10);
    transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 999;
}
#modalItemContent{
    vertical-align: middle;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    background-color: rgb(255,255,255);
    margin-bottom: 20px;
    padding: 50px;
    width: 500px;
}
#modalItem.activity{
    visibility: visible;
    opacity: 1;
}
<button class="buy" id="btnActionOpen">Open</button>

<div id="modalItem">
    <div id="modalItemContent">
       <button id="btnActionClose">Close</button>
    </div>
</div>

只是不要将 JQuery 与 JavaScript 混淆。

javascript

1 个回答

  1. Best Answer

    btnActionOpen.onclick = btnAction;
btnActionClose.onclick = btnAction;

modalItem.onclick = function(e) {
  if (!e.target.closest('#modalItemContent')) {
    btnAction();
  }
}

function btnAction() {
  var modalItem = document.getElementById("modalItem");
  modalItem.classList.toggle("activity");
}
    #modalItem {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  margin: auto;
  visibility: hidden;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.10);
  transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}

#modalItemContent {
  vertical-align: middle;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
  padding: 50px;
  width: 500px;
}

#modalItem.activity {
  visibility: visible;
  opacity: 1;
}
    <button class="buy" id="btnActionOpen">Open</button>

<div id="modalItem">
  <div id="modalItemContent">
    <button id="btnActionClose">Close</button>
  </div>
</div>

    • 2

相关问题