Interacting with a card in vuejs won't trigger any action

Question

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected?

<div v-if="displayOverlay" class="overlay" @click="!displayOverlay">
  <div class="card"> Hello </div>
</div>

.card{
 position: absolute;
 bottom: 400px;
}

javascript html css vue.js

Answer 1

Answer №1

click event bubbles.

When a click event is triggered on <Child /> within this hierarchy:

<GrandParent>
  <Parent>
    <Child />
  </Parent>
</GrandParent>

, the event will propagate through each element in the following order ¹:

on Child
on Parent
on GrandParent
... and so on, up the DOM tree to the window.

To stop an event from bubbling further, you can use the stopPropagation method. This can be done at any level since events are fired sequentially, not simultaneously.

If you want to prevent the propagation to parents and block any subsequent event handlers on the current element, you need to call stopImmediatePropagation method on the event.

Vue offers event modifiers which simplify the process of calling native event methods.

In your scenario, you can use the .stop modifier on .card to prevent the event from reaching .overlay:

<div v-if="displayOverlay" class="overlay" @click="displayOverlay = false">
  <div class="card" @click.stop> Hello </div>
</div>

Demo ^{2, 3}:

new Vue({
  el: '#app',
  data: () => ({
    displayCard: true
  })
})

.overlay {
  position: absolute;
  background-color: rgba(0,0,0,.21);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  height: 200px;
  width: 300px;
  padding: 1rem;
  background-color: white;
}
body {
  margin: 0;
}
#app {
 min-height: 100vh;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c6c5d5f0829e869e8184">[email protected]</a>/dist/vue.min.js"></script>
<div id="app" @click="displayCard = true">
  <div class="overlay" v-if="displayCard" @click.stop="displayCard = false">
    <div class="card" @click.stop>Test</div>
  </div>
  <button v-if="!displayCard">Reopen overlay</button>
</div>

NOTES:

¹ - The ordering mentioned above represents the default firing sequence. Vue provides a modifier (.capture) that allows you to modify it. Before executing the native sequence, Vue checks all parents (from window down to the clicked element) and if any of them has the .capture modifier, their event handler will run first (before the children's handlers). However, this does not mean the event handler will run twice. If it runs in capture phase, it won't run in bubbling phase. .capture doesn't prevent child handlers from running; they will still execute after the parent's handler.

² - I've corrected the @click event handler on the overlay div:

!displayOverlay simply returns the opposite boolean value of the current state of displayOverlay; it does not trigger any action.
To set displayOverlay to false, you should use
```
@click="() => { displayOverlay = false }"
```
. Vue allows for a shorter syntax:
```
@click="displayOverlay = false"
```
(which automatically wraps it with an anonymous function).

³ - <div @click.stop> is shorthand for

<div @click="$event => $event.stopPropagation()">

Answer 2

click event bubbles.

When a click event is triggered on <Child /> within this hierarchy:

<GrandParent>
  <Parent>
    <Child />
  </Parent>
</GrandParent>

, the event will propagate through each element in the following order ¹:

on Child
on Parent
on GrandParent
... and so on, up the DOM tree to the window.

To stop an event from bubbling further, you can use the stopPropagation method. This can be done at any level since events are fired sequentially, not simultaneously.

If you want to prevent the propagation to parents and block any subsequent event handlers on the current element, you need to call stopImmediatePropagation method on the event.

Vue offers event modifiers which simplify the process of calling native event methods.

In your scenario, you can use the .stop modifier on .card to prevent the event from reaching .overlay:

<div v-if="displayOverlay" class="overlay" @click="displayOverlay = false">
  <div class="card" @click.stop> Hello </div>
</div>

Demo ^{2, 3}:

new Vue({
  el: '#app',
  data: () => ({
    displayCard: true
  })
})

.overlay {
  position: absolute;
  background-color: rgba(0,0,0,.21);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  height: 200px;
  width: 300px;
  padding: 1rem;
  background-color: white;
}
body {
  margin: 0;
}
#app {
 min-height: 100vh;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c6c5d5f0829e869e8184">[email protected]</a>/dist/vue.min.js"></script>
<div id="app" @click="displayCard = true">
  <div class="overlay" v-if="displayCard" @click.stop="displayCard = false">
    <div class="card" @click.stop>Test</div>
  </div>
  <button v-if="!displayCard">Reopen overlay</button>
</div>

NOTES:

¹ - The ordering mentioned above represents the default firing sequence. Vue provides a modifier (.capture) that allows you to modify it. Before executing the native sequence, Vue checks all parents (from window down to the clicked element) and if any of them has the .capture modifier, their event handler will run first (before the children's handlers). However, this does not mean the event handler will run twice. If it runs in capture phase, it won't run in bubbling phase. .capture doesn't prevent child handlers from running; they will still execute after the parent's handler.

² - I've corrected the @click event handler on the overlay div:

!displayOverlay simply returns the opposite boolean value of the current state of displayOverlay; it does not trigger any action.
To set displayOverlay to false, you should use
```
@click="() => { displayOverlay = false }"
```
. Vue allows for a shorter syntax:
```
@click="displayOverlay = false"
```
(which automatically wraps it with an anonymous function).

³ - <div @click.stop> is shorthand for

<div @click="$event => $event.stopPropagation()">

Interacting with a card in vuejs won't trigger any action

Answer №1

Similar questions

Next.js encountering page not found error due to broken link URL

What is the best way to navigate users to a different page when they click on a button?

Failure to display updated property value

Looking to place a global filter outside the primeNG table component?

A guide to resolving cross-origin resource sharing issues using a reverse proxy

Modify the div class depending on the date

Enhancing text display and spacing in Safari versions 5 to 6, as well as Chrome

Tips on preventing right-click actions in jqGrid

Instructions for activating and deactivating a numerical input field with a checkbox

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

The SMTP request for a one.com domain email is experiencing issues when sent from the render.com server

Troubleshooting media queries on an example webpage

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

What is the best way to handle multiple promises when loading a state in Angular?

What is the best way to choose the element directly beneath a specific element using jQuery?

The table toggle feature seems to be malfunctioning in Safari, whereas it works perfectly in Chrome

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Retrieve a specified quantity of JSON data from an external API

What is the method for sending raw put data using the request npm package in a Node.js environment

Verify if the item already exists in the Vue.js array