click.trigger（）が特定のネストされた要素で発生しないようにする

Question

click.tigger（）を使用して、テンプレートのモードを編集可能に変更しようとしています。問題は、このテンプレート内に画像のギャラリーがあり、click.triggerを起動したくないということです。

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, 
    }); 
    } 

私はそれが動作し、トリガーをクリックし、編集を有効にすると。ギャラリーはFlickityというプラグインを使用しています。上記の私はそれをどのようにインスタンス化したかを示します。

Answer 1

兄弟要素にクリックバインディングを配置することを検討してください。コードが脆弱/不可能になる可能性があるため、イベントのバブリングを止めないでください。

クイックフィックスは、クリックイベントのtargetを検査することです。クリックがあなたのgallery要素またはその子要素から発生しているかどうかを調べます。

<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; 
    } 
    ... 
} 

注：Element.closest(selector)はまだInternet Explorerでsupportedではありません。安全のためにsimple polyfillを使用してください。