鍍金池/ 問(wèn)答/HTML/ 為什么 Vue 的事件修飾符 .stop 在 Firefox 上不起作用?該如何

為什么 Vue 的事件修飾符 .stop 在 Firefox 上不起作用?該如何解決?

<button :id="item.id" @click="intoDetail(item.id)">
    點(diǎn)擊查看
    <!-- .stop阻止事件冒泡 -->
    <input type="radio" name="liftItem" @click.stop="popData.liftId=item.id
</button>

如上代碼, 當(dāng)我在 Chrome 上點(diǎn)擊 <input> 的時(shí)候, 瀏覽器執(zhí)行的僅僅是popData.liftId=item.id
這行代碼, 而在 Firefox 上, 卻執(zhí)行了 intoDetail() 這個(gè)方法, 這是為什么呢?有什么方法可以阻止點(diǎn)擊事件冒泡到<button>, 只執(zhí)行popData.liftId=item.id嗎?

補(bǔ)充:
我發(fā)現(xiàn)好像不是事件冒泡的問(wèn)題, 在 Chrome 上對(duì)<input>右擊檢查的話會(huì)定位到它<input>本身, 而在 Firefox 上只會(huì)定位到<button>, 可是將<input>的z-index調(diào)高后還是沒(méi)有變化.

回答
編輯回答
你的瞳
  1. 在 fireFox里 event會(huì)失效，就不會(huì)執(zhí)行 event.stop;
  2. 將 popData.liftId=item.id 放入 method 定義的一個(gè)函數(shù)里，
  3. 例子：
getId(e) {
 var e = window.event || e
 e.stopPropagation()
 popData.liftId=item.id
}
// 在標(biāo)簽里執(zhí)行：
 @click="getId($event)"
2018年7月30日 01:50