javascript - stop click.trigger() from firing on a particular nested element -

i trying use click.tigger() change mode of template editable. problem have image gallery inside template don't want click.trigger fire on.

app.js:

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

response.html:

<template>     <div>        ...        <gallery></gallery> <-- want still able fire        <button click.trigger="save()">save</button> <-- want work wont "enableedit()" above attached.     </div> </template> 

gallery.js:

attached() {     const carousel = new flickity(this.gallery, {       cellalign: 'left',       contain: true,       lazyload: true,     });   } 

once click trigger work , enable edit. gallery using plugin called flickity. above show how instantiated it.

consider putting click binding on sibling element. avoid stopping events bubbling because can make code brittle/not-portable.

a quick fix inspect click event's target. find out if click originated gallery element or 1 of it's children.

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

enableedit(target) {   if (target.nodename === 'gallery' || target.closest('gallery') !== null) {     // it's gallery element or 1 of it's children... out of here...     return;   }   ... } 

note: element.closest(selector) isn't supported in internet explorer yet. use simple polyfill safe.