當(dāng)我們在 Vue 中使用 click 事件綁定的時候，經(jīng)常會遇到一個問題：點擊一個元素卻觸發(fā)了它下面的元素的 click 事件，這種情況我們稱之為“click 穿透”。

造成這種問題的原因是，當(dāng)我們在一個元素上觸發(fā) click 事件時，它可能會觸發(fā)不止一個事件。比如，我們在一個按鈕上綁定了 click 事件，同時它的父元素也綁定了 click 事件。當(dāng)我們點擊按鈕時，它首先會觸發(fā)按鈕的 click 事件，然后會向上冒泡，最終觸發(fā)父元素的 click 事件。

<div @click="onClick">
<button @click="onBtnClick">Click me</button>
</div>
methods: {
onClick() {
console.log('Parent clicked')
},
onBtnClick() {
console.log('Button clicked')
}
}

在上面的例子中，當(dāng)我們點擊按鈕時，會分別觸發(fā) 'Button clicked' 和 'Parent clicked' 兩個事件。

那么如何解決 click 穿透的問題呢？有一種比較常見的方法是使用.stop修飾符，它可以阻止事件向上冒泡。

<div @click="onClick">
<button @click.stop="onBtnClick">Click me</button>
</div>
methods: {
onClick() {
console.log('Parent clicked')
},
onBtnClick() {
console.log('Button clicked')
}
}

在上面的例子中，我們在按鈕的 click 事件上加上了.stop修飾符。這樣，當(dāng)我們點擊按鈕時，它僅會觸發(fā) 'Button clicked' 事件，而不再觸發(fā) 'Parent clicked' 事件。