使用.stop解決事件冒泡問題
原代碼為
<van-radio v-for="dict in item.dicData" :key="dict.value" :name="dict.value" :disabled="isCompReadOnly" class="option" > <span class="label">{{ dict.label }}</span> <van-icon name="question-o" size="18" class="question" v-if="dict.optionTips && dict.optionTips !== ''" @click="openTip(dict.optionTips)" /> </van-radio>
但是點擊icon時單選框也被默認選中了，是不符合需求的。
解決方法：增加.stop
即
<van-icon name="question-o" size="18" class="question" v-if="dict.optionTips && dict.optionTips !== ''" @click.stop="openTip(dict.optionTips)" />
問題核心是點擊圖標時事件冒泡到了父級單選框，導致單選框被選中。
.stop 修飾符會阻止事件冒泡，從根源上避免父元素（單選框）接收到點擊事件，因此更適合解決這個問題。
.prevent 的主要作用是阻止瀏覽器默認行為（如表單提交、鏈接跳轉等），而單選框的選中行為是組件內部邏輯，并非瀏覽器默認行為，因此 .prevent 通常無法阻止單選框被選中。
某些情況下，組件可能對事件處理做了特殊處理，此時可以同時使用 .stop 和 .prevent。
浙公網安備 33010602011771號