停止在 div 内传播 div

Question

我在另一张可点击的卡片里有一张卡片。就我而言，卡片内的旋转木马。
在通常情况下，我知道我必须使用@click.stop来防止当我单击其中可点击的内容时打开父卡......但就我而言，我有一个没有点击事件的轮播，因此，我无法在其上使用停止事件。
因此，当我单击轮播的下一个箭头时，也会弹出父卡。
知道如何在没有点击事件的东西上使用stop event handling吗？

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

Answer 1

tl;博士：

在 Vue 中，如果你想停止原生点击事件，你必须使用native事件修饰符：

<carousel @click.native.stop />

或

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

在内部，.stop修饰符调用本机click事件.stopPropagation()，此外还以单击event作为参数运行yourMethod(当指定yourMethod时(。

$emit()-tedclick事件(即：$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')返回的整个集合执行此操作，开箱即用。