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

考虑将click绑定放在兄弟元素上。避免阻止事件冒泡，因为它可能会使您的代码变得脆弱/不可移植。

快速解决方法是检查点击事件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是安全的。

停止click.trigger（）从特定嵌套元素上触发

1 个答案: