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。

你可能感兴趣的:(vue)