row-click 事件阻止事件冒泡讨论 (A discussion about clickoutside directive and stopPropagation when clicking the row)

[ly525]

非常感谢 vue-easytable 这个组件，API 友好但很强大 想讨论一个问题，我看了下源码，在 row-click 方便有些想和您讨论一下。 源码中 这一行中 rowCellClick.stop => this.rowClick && this.rowClick(rowIndex, rowData, column);

1. 想请教一下，这边为什么阻止事件冒泡呢？
2. 我们有实际的应用场景中发现阻止事件冒泡不太合理：

   1. 有一个Select 下拉菜单的组件，下拉菜单有一个指令：v-clickoutside
   2. 这个指令的作用和您项目中的 Select 的clickoutside 作用相同，是当下拉菜的 body 显示之后，用来响应 在下拉菜单的 body 之外的元素上点击事件的
   3. 实际上就是 docuemnt.addEventListener('click', fn). 作用是用来关闭下拉菜单的 body，如下图所示：点击红色区域 即可关闭下拉菜单。
   4. 但是 easytable 里面的row-click 做了 阻止事件冒泡，当点击 row 的时候，会发现原来添加到 document 上的事件并没有响应，所以个人觉得这个是否可以改进？让 table 组件和其他组件的兼容性更好一些。

[huangshuwei]

你好,你提到的几个问题我回答下

想请教一下，这边为什么阻止事件冒泡呢？

这里的row-click 和 row-dblclick,是作用在 td 中的，外层元素绑定了其他的点击事件，所以做了阻止事件冒泡

指令 v-clickoutside 失效

我建议指令中 document 的监听点击事件设置useCapture参数，即

document.addEventListener('click', fn, true)

这样v-clickoutside指令会先于它下方的任何事件目标，接收到事件。因为即使我的组件内部不设置阻止冒泡，你也很难避免你自己的业务组件中使用阻止事件冒泡。

分页组件结合 vue-easytable 组件使用v-clickoutside的实例参考（改变每页大小的效果） https://jsfiddle.net/bhutd9sy/1/

[ly525]

@huangshuwei 非常感谢。赞