vue阻止事件冒泡

再实际开发过程中我遇到了一个问题：

问题描述：

    大致就是一个商品列表，点击里面的每条商品记录就能进入对应商品详情页，点击每条记录里面的步进器就可以对商品的数量进行修改，我给外层的DOM节点绑定了一个点击事件，用来触发跳转进入商品详情页的动作，步进器我用的是Vant UI的一个组件，绑定了一个change事件，这时候就会出现一个问题就是，每当我点击步进器对商品数量进行修改的时候，就会触发我绑定在外层父DOM节点的点击事件。

DOM结构大概如下：

解决方法：

  开始我尝试在步进器中绑定的change事件后面加.stop事件修饰符，但是发现并没有什么作用，最后解决办法是在步进器的父级元素绑定了一个空的点击事件并添加stop事件修饰符（如上图所示）。

相关知识点：

1.事件冒泡：　（事件按照从最特定的事件目标到最不特定的事件）

     当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

阻止事件冒泡的方法：

(1)W3C的方法：e.stopPropagation();

(2)IE:e.cancelBubble=true;

function stopBubble(e){
 if(e && e.stopPropagation){
    e.stopPropagation;
 }else{
    window.event.cancelBubble;
 }
}

 

2.Vue.js 为 v-on 提供了 事件修饰符：

• .stop
• .prevent
• .capture
• .self
• .once