onClickOutside

Package

Share - Core

Category

Sensors

Description

listen for clicks outside of an element

Listen for clicks outside of an element. Useful for modal or dropdown.

Demo

Usage

<script setup>
import { ref } from 'vue';
import { onClickOutside } from '@hungpvq/shared-core';

const target = ref(null);

onClickOutside(target, (event) => console.log(event));
</script>

<template>
  <div ref="target">Hello world</div>
  <div>Outside element</div>
</template>

This function uses Event.composedPath() which is NOT supported by IE 11, Edge 18 and below. If you are targeting these browsers, we recommend you to include this code snippet on your project.