Event not fired in vuejs

Question

I have an overlay for my modal. When someone clicks on the overlay, the modal should be toggled. In my mounted() method I have the following code:

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

I have added the template below

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

I made sure with a console.log() that the click events are added. However when I click on the modal nothing happens. I tried to do a console.log() but it didn't work.

Any suggestions?

Answer 1

I would guess that the problem is the CSS class pointer-events-none. I don't know for sure what that does but assuming it adds pointer-events: none it would disable all click events for all child elements.

That should be sufficient to solve your problem, however I would also note that:

1. In Vue it is preferred to use ref/$refs instead of CSS selectors if you want to grab hold of elements inside the mounted hook.
2. The mounted hook should not be necessary as you can just add @click attributes directly in the template.
3. Be careful to ensure that you haven't added the click listener to any elements twice. I don't know what toggleModal does but there's a risk that if you call it twice you'll end up changing nothing. In the code you provided it seems that some elements were getting two click listeners, both pointing at toggleModal.

Answer 2

You can add click listeners to basically anything in Vue. That's the magic of it. It can be a div, a span, an image. Just add @click to your overlay div and it should work.

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