th 随意滑动都可以改变列宽的问题

前言：请查看该文章实现的效果 https://www.jianshu.com/p/22536ed33546

问题描述

即不仅可以通过拖动黄色来增加列宽，滑动红色框区域也可以增加列宽，显然这不是我们想要的结果。（第一次发现还觉得很神奇，但是玩多了感觉很奇怪，这是为啥呢？头疼中......)

效果图

问题分析

看起来一头雾水，这种情况为啥出现？难道我哪里做的不对吗？该绑定的事件绑定了啊？
仔细看下源码，绑定事件如下
<th @mousemove="handleMouseMove" @mouseout="handleMouseOut" @mousedown="handleMouseDown">xxx</th>
调试器的 Element 如下：

可以知道我们这个是仿照element-ui进行修改的，查看下 element-ui中的，发现人家 th 里面包了一层 div.cell 层

div.cell
事件代码如下：

这一句很关键就是用来阻止事件传播的。

问题解决

相应进行对应代码修改即可。