web-dev-qa-db-fra.com

Empêcher le clic sur le parent lorsque vous cliquez sur le bouton à l'intérieur de div

Est-il possible d'empêcher la fonction sur le <div> l'élément de s'exécuter lorsque vous cliquez sur le bouton à l'intérieur de la div?

Lorsque vous cliquez sur l'élément bouton, la fonction: toggleSystemDetails ne doit pas être déclenchée? Est-ce possible dans Vue?

<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}">
      <div class="grid-tile__list-item--overlay">
        <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
          Layout Settings
        </button>
      </div>
vue.jsvuejs2
46
hauge

Jetez un oeil à Modificateurs d'événements , v-on:click.stop empêchera ce clic de se propager ou de "bouillonner" jusqu'à l'élément parent.

93
Justin

Voici comment maîtriser ce problème.

Supposons que vous ayez un élément parent et des éléments enfants.

1. (1er cas) Vous voulez que le clic parent n'affecte pas les clics enfants. Mettez simplement à l'élément parent le .self modificateur:

  <div class="parent" @click.self="parent"> <!-- .self modifier -->
    <span class="child" @click="child1">Child1</span>
    <span class="child" @click="child2">Child2</span>
    <span class="child" @click="child3">Child3</span>
  </div>

Voir en action ici

remarque: si vous supprimez le .self lorsque vous cliquez sur un enfant, l'événement parent se déclenche également.

2. (2ème cas) Vous avez le code ci-dessous:

  <div @click="parent">
    Click to activate 
    <i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
  </div>

Le problème est:

  1. Lorsque vous cliquez sur l'élément icône, le clic parent se déclenche. (tu ne veux pas ça)
  2. Vous ne pouvez PAS utiliser la 1ère solution car vous souhaitez déclencher l'événement parent même si le texte "Cliquez pour activer" est cliqué.

La solution est de mettre le .stop modificateur à l'élément icône pour que l'événement parent ne se déclenche pas.

Voir en action ici

33
roli roli

comme mentionné sur le lien fourni par Justin vous pouvez .self dans l'événement click

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
12
Mawardy