0

I am trying to use click.tigger() to change the mode of the template to editable. Problem is I have a image gallery inside this template that I don't want click.trigger to fire on.

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

Once I click the trigger it does work and enable edit. The gallery is using a Plugin called Flickity. Above I show how I instantiated it.

allencoded
  • 7,015
  • 17
  • 72
  • 126

1 Answers1

4

Consider putting the click binding on a sibling element. Avoid stopping events from bubbling because it can make your code brittle/not-portable.

A quick fix would be to inspect the click event's target. Find out if the click originated from your gallery element or one 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 the gallery element or one of it's children... get out of here...
    return;
  }
  ...
}

note: Element.closest(selector) isn't supported in Internet Explorer yet. Use a simple polyfill to be safe.

Jeremy Danyow
  • 26,470
  • 12
  • 87
  • 133
  • That $event.target is jquery no? Is there a vanilla approach to passing over the target or grabbing the target? – allencoded Jul 21 '16 at 21:22
  • 1
    `$event` is an aurelia property you can bind to in `delegate` and `trigger` bindings that will give you access to the DOM event that was fired. – Jeremy Danyow Jul 21 '16 at 21:23