How can I make a Vue component close when clicking outside of it?

Question

How can I make a Vue component close when clicking outside of it?

I am searching for a solution to automatically close a component when there is a click outside of the element.

I attempted to use an addEventListener for this purpose. Although it successfully closes the component, it encounters an issue where it fails to reopen once closed.

window.addEventListener('click', function(e){

if (document.getElementById('shopcartpreview').contains(e.target)){
console.log("Clicked in Box");


} else{
console.log("Clicked outside Box");
$('#shopcartpreview').hide();
 }
 })

Is there a better approach to handle this scenario?

<template>
    <div id="shopcartpreview"  v-if="carthover">
        <div class="cartitem" v-for="item in cartitems">
            <div class="cartitempic"><img class="productImg" width="80px" height="80px" v-bind:src="'assets/products/' + item.image"></div>
            <div class="cartitemdetails">
                <div class="cartitemname">{{item.name}}</div>
                <div class="cartitemqty">1 X </div>
                <div class="cartitemprice">€{{item.unit_price}}</div>
            </div>
            <div class="cartitemdelete">
                <img src="assets/images/icon-bin.png" width="15px" height="15px">
            </div>
        </div>

        <div class="carttotal">
            <div class="carttotaltext">TOTAL:</div>
            <div class="carttotalprice">€2,860.00</div>
        </div>
        <div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
        <div class="viewcart">VIEW CART</div>



    </div>    
</template>
<script>
    module.exports = {
        data: function () {
                return{ 
                    cartitems: 0,
                    carthover: false,
                }
            },
            created(){
            EventBus.$on('addToCart', (payload) =>{
                this.cartitems = payload
            }),
            EventBus.$on('mouseover', (carthover) =>{
            this.carthover = carthover
            })
        }
    }
</script>

javascript vue.js

Answer 1

Answer №1

I added a div tag to the component's structure, located at the bottom:

<div v-if="isPopup" class="outside" v-on:click="away()"></div>

The CSS styling for the .outside class is defined as:

.outside {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
}

The away() function is included in the Vue instance to handle the click event:

away() {
 this.isPopup = false;
}

Simple and effective solution.

Answer 2

I added a div tag to the component's structure, located at the bottom:

<div v-if="isPopup" class="outside" v-on:click="away()"></div>

The CSS styling for the .outside class is defined as:

.outside {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
}

The away() function is included in the Vue instance to handle the click event:

away() {
 this.isPopup = false;
}

Simple and effective solution.

Answer 3

Answer №2

2020.11.10 Update

I realized that the solution I provided earlier had numerous errors, prompting me to make necessary updates.

There are various ways to close a component by clicking outside of it.

One approach is to utilize libraries specifically designed to handle this issue, such as simplesmiler/vue-clickaway, which is also incorporated in nuxt if you examine the source code.

Alternatively, if you prefer a manual implementation, here is the code:

onClickOutside ( event: Event ) {

    const path = event.path || (event.composedPath ? event.composedPath() : undefined)
    // check if the MouseClick occurs inside the component
    if (path && !path.includes(this.em) && !this.em.contains(event.target as HTMLElement)) {
      this.closeThisComponent() // method to close the component
    }
  }

Subsequently, you need to bind this eventHandler onClickOutside to the document.documentElement after opening your component and remove it from document.documentElement upon closing the component.

It is crucial to consider the timing and understand the event loop of JavaScript, distinguishing between MicroTasks and MacroTasks.

For instance, when opening the component:

openThisComponent () {
    this.showThisComponent = true // code to open the component

    // You can also utilize Vue.$nextTick or setTimeout
    requestAnimationFrame(() => {
      document.documentElement.addEventListener('click', this.onClickOutside, false)
    })

  }

closeThisComponent () {
    this.showComponent = false // code to close the component
    document.documentElement.removeEventListener('click', this.onClickOutside, false)
  }

Answer 4

2020.11.10 Update

I realized that the solution I provided earlier had numerous errors, prompting me to make necessary updates.

There are various ways to close a component by clicking outside of it.

One approach is to utilize libraries specifically designed to handle this issue, such as simplesmiler/vue-clickaway, which is also incorporated in nuxt if you examine the source code.

Alternatively, if you prefer a manual implementation, here is the code:

onClickOutside ( event: Event ) {

    const path = event.path || (event.composedPath ? event.composedPath() : undefined)
    // check if the MouseClick occurs inside the component
    if (path && !path.includes(this.em) && !this.em.contains(event.target as HTMLElement)) {
      this.closeThisComponent() // method to close the component
    }
  }

Subsequently, you need to bind this eventHandler onClickOutside to the document.documentElement after opening your component and remove it from document.documentElement upon closing the component.

It is crucial to consider the timing and understand the event loop of JavaScript, distinguishing between MicroTasks and MacroTasks.

For instance, when opening the component:

openThisComponent () {
    this.showThisComponent = true // code to open the component

    // You can also utilize Vue.$nextTick or setTimeout
    requestAnimationFrame(() => {
      document.documentElement.addEventListener('click', this.onClickOutside, false)
    })

  }

closeThisComponent () {
    this.showComponent = false // code to close the component
    document.documentElement.removeEventListener('click', this.onClickOutside, false)
  }

Answer 5

Answer №3

Here's a helpful Demo Fiddle: https://jsfiddle.net/bq8m4fhe/

If you want to create a clickoutside directive, check out this resource: Detect click outside element

module.exports = {
    data: function() {
        return {
            cartitems: 0,
            carthover: false
        };
    },
    directives: {
        clickoutside: {
            bind: function(el, binding, vnode) {
                el.clickOutsideEvent = function(event) {
                    // Check if click was outside the element and its children
                    if (!(el == event.target || el.contains(event.target))) {
                        // Call the method provided in the attribute value
                        vnode.context[binding.expression](event);
                    }
                };
                document.body.addEventListener("click", el.clickOutsideEvent);
                document.body.addEventListener("touchstart", el.clickOutsideEvent);
            },
            unbind: function(el) {
                document.body.removeEventListener("click", el.clickOutsideEvent);
                document.body.removeEventListener("touchstart", el.clickOutsideEvent);
            },
            stopProp(event) {
                event.stopPropagation();
            }
        }
    },
    created() {
        EventBus.$on("addToCart", payload => {
            this.cartitems = payload;
        }),
        EventBus.$on("mouseover", carthover => {
            this.carthover = carthover;
        });
    }
};

To use the directive, implement it like this:

<div id="shopcartpreview"  v-if="carthover" v-clickoutside="SHOPPING_CART_HIDE_FUNCTION">

Answer 6

Here's a helpful Demo Fiddle: https://jsfiddle.net/bq8m4fhe/

If you want to create a clickoutside directive, check out this resource: Detect click outside element

module.exports = {
    data: function() {
        return {
            cartitems: 0,
            carthover: false
        };
    },
    directives: {
        clickoutside: {
            bind: function(el, binding, vnode) {
                el.clickOutsideEvent = function(event) {
                    // Check if click was outside the element and its children
                    if (!(el == event.target || el.contains(event.target))) {
                        // Call the method provided in the attribute value
                        vnode.context[binding.expression](event);
                    }
                };
                document.body.addEventListener("click", el.clickOutsideEvent);
                document.body.addEventListener("touchstart", el.clickOutsideEvent);
            },
            unbind: function(el) {
                document.body.removeEventListener("click", el.clickOutsideEvent);
                document.body.removeEventListener("touchstart", el.clickOutsideEvent);
            },
            stopProp(event) {
                event.stopPropagation();
            }
        }
    },
    created() {
        EventBus.$on("addToCart", payload => {
            this.cartitems = payload;
        }),
        EventBus.$on("mouseover", carthover => {
            this.carthover = carthover;
        });
    }
};

To use the directive, implement it like this:

<div id="shopcartpreview"  v-if="carthover" v-clickoutside="SHOPPING_CART_HIDE_FUNCTION">

How can I make a Vue component close when clicking outside of it?

Answer №1

Answer №2

Answer №3

Similar questions

Processing made easy with jQuery

Improving animation performance on mobile devices using AngularJS

Only the initial upload file is being passed through the Apollo Express server, with the remaining files missing in action

javascript various backgrounds on click

Guide on adjusting the resolution/density of images in JPEG/PNG using JavaScript

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

Navigational highlighting of current page section on a one-page website

What are the best methods for utilizing scrollbars to navigate a virtual canvas?

evt.target consistently returns the initial input within the list of inputs

Issues with reading response headers in AngularJS when using Apiary.IO?

Tips for concealing the final click (add) tab after it has been clicked and revealing the hidden (add) button when the user clicks on the remove button

Using setInterval on a batch of freshly generated div elements

the object '[object Object]' of a distinct supporting nature

Convert grouped data in Javascript into a JSON array

Error: selenium web driver java cannot locate tinyMCE

nuxt-auth is experiencing difficulties retrieving token information through the refresh provider

Solving the challenge of converting images to text using react-native and the @react-native-ml-kit/text-recognition package

Using React hook form to create a Field Array within a Dialog component in Material UI

Tips for adjusting the autocomplete maxitem dynamically

Tips for creating a countdown timer from scratch without relying on a plugin