Question

我的模态有一个覆盖层。当有人单击叠加层时，应该切换模式。在我的mounted()方法中，我有以下代码：

const overlay = document.querySelector(".modal-overlay");

overlay.addEventListener("click", this.toggleModal);

var closemodal = document.querySelectorAll(".modal-close");
for (var i = 0; i < closemodal.length; i++) {
  closemodal[i].addEventListener("click", this.toggleModal);
}

我已经在下面添加了模板

   <template> <divclass="modal pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div ref="overlay" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50 z-50"></div>

<div
  class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
>
  <div
    class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50"
  >
    <svg
      class="fill-current text-white"
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 18 18"
    >
      <path
        d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
      />
    </svg>
    <span class="text-sm">(Esc)</span>
  </div>

  <!-- Add margin if you want to see some of the overlay behind the modal-->
  <div class="modal-content py-4 text-left px-6">
    <!--Title-->
    <div class="flex justify-between items-center pb-3">
      <p class="text-2xl font-bold">Bedankt</p>
      <div class="modal-close cursor-pointer z-50">
        <svg
          class="fill-current text-black"
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 18 18"
        >
          <path
            d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
          />
        </svg>
      </div>
    </div>

    <!--Body-->
    <p>Je email adres is toegevoegd aan onze mailing list. We houden je op de hoogte van de laatste ontwikkelingen</p>
    <p>Tevens hebben we je op de beta lijst gezet en je zult als een van de eersten een uitnodiging van ons ontvangen om het platform te testen</p>
    <!--Footer-->
    <div class="flex justify-end pt-2">
      <button
        @click="toggleModal"
        class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400"
      >Close</button>
    </div>
  </div>
</div>

我通过console.log()确保添加了click事件。但是，当我单击模式时，什么也没有发生。我尝试做一个console.log()，但是没有用。

有什么建议吗？

Answer 1

您可以在Vue的任何内容中添加点击侦听器。那就是魔术。它可以是一个div，一个跨度，一个图像。只需将@click添加到叠加层div即可，

<div ref="overlay" @click="toggleModal"></div>

Answer 2

我猜想问题出在CSS类pointer-events-none上。我不知道该怎么做，但是假设它添加了pointer-events: none，它将禁用所有子元素的所有点击事件。

这应该足以解决您的问题，但是我还要指出：

在Vue中，如果要抓住ref挂钩内的元素，最好使用$refs / mounted而不是CSS选择器。
不需要mounted钩子，因为您可以直接在模板中添加@click属性。
请注意确保没有两次将点击侦听器添加到任何元素。我不知道toggleModal的作用，但是有风险，如果您两次调用它，最终将什么都没做。在您提供的代码中，似乎某些元素正在获得两个单击侦听器，它们都指向toggleModal。

vue.js中未触发事件

2 个答案: