『解疑』vue阻止事件冒泡跟css阻止事件冒泡冲突问题

问题

当你是用vue的@click.stop阻止事件冒泡修饰符的同时，给该div加上了pointer-events: none;样式，这样你将无法使用@click方法。

解答

知识点：

事件冒泡描述：
有两个div，分别为 父div 跟 子div，父div包裹着子div，我们分别给两个div添加点击事件，点击 子div 时，会由于事件冒泡，从而也触发 父div 的点击事件，这就称为事件冒泡。

vue 中阻止事件冒泡修饰符
@click.stop

css中阻止事件冒泡
pointer-events: none;

这两种方法都是能够实现阻止div，但是如果同时使用的话，将会发生冲突。
效果为：样式被阻止冒泡修改，但是绑定的click事件也无效了。

总结

我们只能取一种方法实现，即只使用vue的@click.stop。