Vue处理事件冒泡

一，什么是冒泡

       事件处理是由内而外发生的，例如有两个父子div，给他们分别写上点击事件，点击子div先响应的是子div，再是父div。

 

 

 

二，事件冒泡修饰符（处理）

        .stop  ---一种vue的事件修饰符，阻止事件冒泡，比如给上面的子元素的@click加上.stop将不会再触发父级的点击事件@click。

         .prevent  ---作用是阻止提交。form表单组件和a链接组件都会导致页面刷新和跳转。如果不希望页面刷新，则可以加上.prevent以阻止这种默认的刷新操作。注意：.prevent只对form和a标签有效。

         .capture ---作用是优先触发，比如在上面的例子中，如果不阻止冒泡，而在父级div元素上添加这个修饰符，则会优先触发fatherfun，然后触发子div的点击事件，这就是一个优先级的调整。

        .self ---（默认的行为）当仅单击元素本身时，只允许元素自己触发，子元素无法触发。上面的例子，给父级div添加这个修饰符，当单击父级div的部分（不单击子元素部分）时，就会只触发fatherfun，不会触发子元素自己的单击事件。

        .once ---表示只触发一次，比如给sonfun加上这个修饰符，就只会触发一次。

（未阻止子元素冒泡）