关于vue @click 工作遇到的一个小疑惑

Question

<div style="width:100px;height:40px;display:flex;">
    <div style="flex:2" @click="$router.push('/edit')">编辑</div>
    <div style="flex:1"> | </div>
    <div style="flex:2">删除</div>
 </div>

问题是这样的:
我点击第二个div区域范围的时候也会触发click事件。第三个div正常，没触发
当我给第二个div加一个click事件时：点击第一、第二个正常。第三个div触发了第二个div的事件

ps: 第一、二、三指 被包着的三个div。

这个会不会跟flex布局有关系？
小弟还是个前端小白，求大佬指教！

Answer 1

懒惰的我拖了一个月，现在来说一下问题原由！
这是一个小乌龙事件~
这个问题是出自在谷歌浏览器移动端调试时出现的，鼠标样子会变成一个黑色的圆圈图标，但凡这个小圆圈触及到的地方都会触发点击事件，而两个相邻的元素紧挨一起时我猜测是会计算哪个元素占据这个圆圈面积多就会触发哪个。
因为有时候在移动端调试模式时鼠标仍是箭头图标，我就误以为箭尖才是点击的地方。或者给无点击事件的元素添加cursor:pointer也不会出现这样乌龙问题啦
火狐浏览器就不会出现这样的问题啦，因为火狐就没有黑色小圆圈
小弟在这里对各位看客以及好心的大佬们说声抱歉~

Answer 2

不可能不可能

Answer 3

我这里用你发的代码想复现你的问题，可是没有成功，一切正常，并没有出现你的问题，SO.....