stoppe click.trigger() beim Auslösen eines bestimmten verschachtelten Elements

Question

Ich versuche click.trigger() zu verwenden, um den Modus der Vorlage in editierbar zu ändern. Problem ist, dass ich in dieser Vorlage eine Bildergalerie habe, auf die ich nicht klicken soll.

app.js:

<div click.trigger="enableEdit()"> 
    <response containerless></response> 
</div> 

response.html:

<template> 
    <div> 
     ... 
     <gallery></gallery> <-- I want this to still be able to fire 
     <button click.trigger="save()">save</button> <-- I want this to work as well but they wont with "enableEdit()" above attached. 
    </div> 
</template> 

Gallery.js:

attached() { 
    const carousel = new Flickity(this.gallery, { 
     cellAlign: 'left', 
     contain: true, 
     lazyLoad: true, 
    }); 
    } 

Sobald ich den Auslöser klicken, um es funktioniert und bearbeiten zu können. Die Galerie verwendet ein Plugin namens Flickity. Oben zeige ich, wie ich es instanziiert habe.

Answer 1

Ziehen Sie die Klickbindung auf ein Geschwisterelement. Vermeiden Sie das Stoppen von Ereignissen, da dies Ihren Code spröde/nicht tragbar machen kann.

Eine schnelle Lösung wäre, das Klickereignis target zu überprüfen. Finden Sie heraus, ob der Klick von Ihrem gallery Element oder einem seiner Kinder stammt.

<div click.trigger="enableEdit($event.target)"> 
    <response containerless></response> 
</div> 

enableEdit(target) { 
    if (target.nodeName === 'gallery' || target.closest('gallery') !== null) { 
    // it's the gallery element or one of it's children... get out of here... 
    return; 
    } 
    ... 
} 

Anmerkung: Element.closest(selector) nicht supported im Internet Explorer vor. Verwenden Sie eine simple polyfill, um sicher zu sein.