Post
Ask Question

How to Detect Event on Clicks Outside in Vue.js

Detecting clicks outside an element in Vue.js, also known as handling click events outside a specific element, is a common requirement in web applications, especially for scenarios like closing dropdown menus, modals, or other components when the user clicks outside of them. You can achieve this by adding an event listener to the document or a specific container and then checking if the click occurred outside the target element.

Here's a step-by-step guide on how to detect clicks outside an element in Vue.js:

Step 1. Create a Method to Handle Clicks Outside

First, create a method in your Vue component to handle clicks outside the target element. This method will check whether the click occurred outside the element and perform the desired action (e.g., closing a dropdown menu).

methods: {
  handleClickOutside(event) {
    // Check if the clicked element is outside the target element
    if (!this.$refs.targetElement.contains(event.target)) {
      // Perform your action here, such as closing a dropdown menu
      this.isOpen = false; // Example: Close dropdown menu
    }
  }
}

Step 2. Add Click Event Listener

Next, add a click event listener to the document or a specific container in the mounted() lifecycle hook of your component. This event listener will call the handleClickOutside method whenever a click occurs.

mounted() {
  // Add click event listener to document
  document.addEventListener('click', this.handleClickOutside);
}

Step 3. Remove Event Listener (Optional)

To avoid memory leaks, it's a good practice to remove the event listener when the component is destroyed. You can do this in the beforeDestroy() lifecycle hook.

beforeDestroy() {
  // Remove click event listener from document
  document.removeEventListener('click', this.handleClickOutside);
}

Step 4. HTML Template

Finally, use the $refs attribute in your template to set a reference to the target element.

<template>
  <div ref="targetElement">
    <!-- Your target element here, such as a dropdown menu -->
  </div>
</template>

Example

Putting it all together, here's how your Vue component might look.

<template>
  <div ref="targetElement">
    <!-- Your target element here, such as a dropdown menu -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    handleClickOutside(event) {
      if (!this.$refs.targetElement.contains(event.target)) {
        this.isOpen = false; // Close dropdown menu
      }
    }
  }
};
</script>

This setup ensures that when a click occurs outside the target element (<div ref="targetElement"> in this example), the dropdown menu (or any other component) will be closed. Adjust the logic and actions inside handleClickOutside to suit your specific requirements.


Similar Articles