Javascript vuejs中未激发事件

我有一个覆盖我的模态。当有人点击覆盖时，模式应该被切换。在我的

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);
}

const overlay=document.querySelector（“.modal overlay”）；
overlay.addEventListener（“单击”，this.toggleModal）；
var closemodal=document.queryselectoral（“.model close”）；
对于（变量i=0；i

我已经在下面添加了模板

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

（Esc）
Bedankt

我的电子邮件地址是toegevoegd和onze邮件列表。我们需要一份工作

我们可以在测试平台上进行测试

关

我使用

console.log（）

确保添加了

单击事件。然而，当我点击模态时，什么也没有发生。我试图执行一个
console.log（）
，但没有成功

有什么建议吗？
您可以向Vue中的任何内容添加单击侦听器。这就是它的魔力所在。它可以是一个div，一个span，一个image。只需将@click添加到覆盖div中，它就可以工作了

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

我猜问题在于CSS类
指针事件无
。我不知道这到底是怎么回事，但假设它添加了
指针事件：none
它将禁用所有子元素的所有单击事件

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

在Vue中，如果要抓住
挂载的
挂钩内的元素，最好使用
ref
/
$refs
而不是CSS选择器
不需要挂载
钩子，因为您可以直接在模板中添加
@单击
属性

请注意，确保没有两次将click listener添加到任何元素。我不知道toggleModal的功能是什么，但有一种风险，就是如果你两次调用它，你最终将一无所获。在您提供的代码中，似乎有些元素获得了两个单击侦听器，都指向
toggleModal
如果使用Vue，为什么要使用原始选择器和事件侦听器？你能发布足够的HTML来重现这个问题吗？你需要在mounted中使用nextTick，然后将代码放入nextTick函数中。。。阅读文档了解更多信息，因为事件是添加到div的，而不是添加到输入等等。将更新post soonit是因为您正在向dom中尚不存在的元素添加click事件