例如：

<li @click="popSelect($event)"><span>Bank Country</span><input type="text" placeholder="Select bank country" v-model="model.bank_country" name="bank_country" readonly /><van-icon name="arrow-down"></van-icon><em>Country is required</em></li>

li上綁定popSelect($event)方法

popSelect: function (e) {var ele = e.target;console.log(ele.localName);if(ele.localName == 'li'){} }

點擊li時會穿透到子集，span、input等標簽，這時你拿到的e.target就不確定是哪個節點，但是你又需要操作的只是li，用@click.stop等等都沒用，因為這是防止向上冒泡，這是可以利用css。例如：

.enter-account ul li span {pointer-events:none; }

在你不想點到的節點上添加pointer-events:none;這行css，就取消了它的點擊事件，這時你無論點li的任何地方，獲取到的e.target都是li節點。

總結

以上是生活随笔為你收集整理的vue事件委托传递节点防止向下传递穿透的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。