Klicks innerhalb eines Div erkennen, aber außerhalb eines bestimmten Kindes Div in VueJS

Question

Ich habe eine Seite, in der ich MCQ Optionen haben, die wie folgt aussieht:

Dies ist der HTML-Code für die Optionen Teile bis jetzt:

<div v-for="(option, index) in optionsForFrontend"> 
      <div class="option"> 
       <div class="radio-check-item"> 
        <input type="radio" 
         name="question" 
         :value="index" 
         v-model="picked" 
         v-if="question.metadata.choices === 'Single'"> 
        <input type="checkbox" 
         name="question" 
         :value="index" 
         v-model="picked" 
         v-if="question.metadata.choices === 'Multiple'"> 
       </div> 
       <div class="divider"> 

       </div> 
       <div class="content-item"> 
        <vue-markdown :source="option.option"></vue-markdown> 
       </div> 
      </div> 
     </div> 

Ich möchte die Optionen auswählen, indem Sie auf den Inhalt der Option klicken. Also setze ich eine :click="functionToSelectOption" auf die äußere div ("Option") mit Checkbox und Option Inhalt.

Das Problem ist, wenn ich das Kontrollkästchen ankreuze, wird es ausgewählt und die Funktion "functionToSelectOption" wird auch aufgerufen, da das Kontrollkästchen innerhalb der "Option" Div ist.

Ich möchte in der "Option" div aber außerhalb Radio/Checkbox div einen Klick erkennen, so dass ich die Funktion aufrufen kann, um die Option umzuschalten.

Ich fand meistens ähnliche Fragen unter jquery Tags und nichts mit VueJS.

Answer 1

Ich würde Ereignis vermeiden. stopPropagation(). Alle möglichen Dinge könnten höher im Baum lauschen. Zum Beispiel möchten Sie vielleicht einen onclick auf dem Fenster, um einen modalen Dialog zu schließen, wenn der Benutzer außerhalb des Dialogs klickt. Der weitaus weniger radikale Weg dazu ist der Blick auf event.target. This jsfiddle Tests (event.target == event.currentTarget) so reagiert es nur auf Klicks auf das Elternteil-Div.

Markup

<div id="ctr"> 
    <div v-for="(option,index) in options" 
    style="margin:10px;padding:10px;border:solid;border-radius:4px" 
    @click="parent" 
    > 
    <input type="checkbox" :name="'invidiousChoice' + index" @click='child'> {{option.label}} 
    </div> 
</div> 

JS

var vm = new Vue({ 
    el:"#ctr", 
    data : { 
    options:[{label:'terrible option'},{label:'disastorous option'}] 
    }, 
    methods: { 
    parent: function(event) { 
     if(event.target == event.currentTarget) 
     alert('parent clicked'); 
    } 
    } 
}) 

Answer 2

Sie können event.stopPropagation() im untergeordneten Element verwenden. Hier

arbeitet JSFiddle Lösung: Link

HTML

<div id="app"> 
<div @click="parent"> 
    Parent 
    <div> 
     <input type="checkbox" @click="child"> 
    </div> 
</div> 
{{message}} 

JS

new Vue({ 
el: '#app', 
data: { 
    message: '' 
}, 
methods: { 
    parent: function() { 
     this.message = 'parent clicked'; 
    }, 
    child: function() { 
     event.stopPropagation() 
    } 
} 
});