饿了么加入购物车按钮的实现

Question

问题描述

圆圈代表点击区域，正方形代表子元素的区域，父元素是这个图片的大小，当手指点击到子元素（加号按钮）的同时也点击了父元素（白色背景），如图所示，只要点击区域包含了子元素就触发子元素的事件，而不触发父元素的事件，该怎么做？
当我点击圆圈区域的时候很容易点击到白色背景触发别的事件，而不是想要的增加数量的事件，请问一下怎么才能扩大按钮的点击区域？

Answer 1

防止事件冒泡 如果你用的是vue @click.stop="" 原生的话 就直接在handler里e.stop()

Answer 2

加上事件防止冒泡事件 可以通过调用event.prepagation()来中断事件流，后续的阶段将不会被调用 看看这篇文章