停止div内的div传播。

Question

我在另一个可点击的卡片里面有一张卡片。在我的情况下，一张卡片里面有一个转盘。 在通常情况下，我知道我必须使用 @click.stop 以防止打开父卡，当我点击父卡内的可点击的东西时，打开父卡......但在我的情况下，我有一个 旋转木马 没有点击事件，因此，我无法对它使用停止事件。 所以当我点击旋转木马的下一个箭头时，父卡也会弹出。 有什么办法可以让我使用 stop event handling 在没有点击事件的东西上？

________________
|            <-|---- Master Card
| ------------ |
| |       <--|-|---- Carousel
| |__________| |
|              |
|              |
|______________|

Answer 1

tl;dr:

在Vue中，如果你想停止原生的点击事件，你必须使用@click. native 事件修饰语。

<carousel @click.native.stop />

或

<carousel @click.native.stop="yourMethod" />

在内部， .stop 修饰语调用 .stopPropagation() 在本地 click 活动，除了运行 yourMethod 喀嚓 event 作为参数 yourMethod 是指定的）。)

$emit()-(ted) click 事件（即 $emit('click', payload) 不需要停止，因为它们默认不传播。

---

完整的答案。 (无论Vue如何)

任何HTML元素都有一个 onclick 事件。

因此，

document.querySelector('.your-selector').onclick = function(event) {
  event.stopPropagation()
}

将停止 click 事件的传播 document.querySelector('.your-selector') 选择您的旋转木马 - 注意 querySelector 只返回与选择器匹配的第一个元素）。)

如果你想对匹配同一个选择器的多个元素进行操作，你需要使用 querySelectorAll 并遍历每个元素。例子。

 [...document.querySelectorAll('.your-selector')].forEach(el => {
   el.onclick = function(e) {
     e.stopPropagation();
   }
 });

---

有一些不那么啰嗦的方法可以用框架来实现，比如jQuery。

$('.your-selector').on('click', e => { e.stopPropagation(); })

...对整个集合进行迭代。$('.your-selector')，开箱即用。