停止 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>

图库.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 以确保安全。