javascript - 阻止 click.trigger() 在特定嵌套元素上触发

Question

我正在尝试使用 click.tigger() 将模板的模式更改为可编辑。问题是我在这个模板中有一个图片库，我不希望 click.trigger 触发。

app.js:

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

响应.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

考虑将单击绑定(bind)放在同级元素上。避免阻止事件冒泡，因为它会使您的代码变得脆弱/不可移植。

快速修复方法是检查点击事件的 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)不是supported尚未在 Internet Explorer 中使用。使用simple polyfill为了安全起见。