# useOnOutsidePress
Execute callback when click is outside of element
# Parameters
import { useOnOutsidePress } from "vue-composable";
useOnOutsidePress(element, callback);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
element | Ref<Element> | true | Element to keep track if clicked outside | |
callback | (e: MouseEvent) => void | true | Callback when clicked outside |
# Methods
The useOnOutsidePress
function exposes the following methods:
import { useOnOutsidePress } from "vue-composable";
const remove = useOnOutsidePress();
Signature | Description |
---|---|
remove | Manually removes the event listener |
# Example
Click Outside or inside
check the console
# Code
<template>
<div>
<div ref="elref" style="background: red;width:100px">
Click Outside or inside
</div>
<p>check the console</p>
</div>
</template>
<script>
import { reactive, ref } from "@vue/composition-api";
import { useOnOutsidePress } from "vue-composable";
export default {
name: "on-mouse-move-example",
setup(_) {
const elref = ref(null);
useOnOutsidePress(elref, () => console.log("clicked outside"));
return { elref };
}
};
</script>