为什么 Vue 的事件修饰符 .stop 在 Firefox 上不起作用?该如何解决?

Question

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

如上代码, 当我在 Chrome 上点击 <input> 的时候, 浏览器执行的仅仅是popData.liftId=item.id
这行代码, 而在 Firefox 上, 却执行了 intoDetail() 这个方法, 这是为什么呢?有什么方法可以阻止点击事件冒泡到<button>, 只执行popData.liftId=item.id吗?

补充:
我发现好像不是事件冒泡的问题, 在 Chrome 上对<input>右击检查的话会定位到它<input>本身, 而在 Firefox 上只会定位到<button>, 可是将<input>的z-index调高后还是没有变化.

Answer 1

1. 在 fireFox里 event会失效，就不会执行 event.stop;
2. 将 popData.liftId=item.id 放入 method 定义的一个函数里，
3. 例子：

getId(e) {
 var e = window.event || e
 e.stopPropagation()
 popData.liftId=item.id
}
// 在标签里执行：
 @click="getId($event)"