vue基础知识(二)——事件修饰符

事件修饰符

1.vue中提供了一些事件修饰符，其中比较典型的是.stop和.prevent修饰符

• .stop阻止冒泡（防止里面的类似点击事件同时触发了外面包裹的标签的点击事件）

<a @click.stop="handle"></a>

• .prevent阻止默认行为（防止类似于a链接上在进行如点击事件时又执行默认跳转行为）

<a @click.prevent="handle"></a>

2.原生js中处理事件冒泡和默认行为方式如下

• 只阻止事件冒泡

handle:function(event){
  // 阻止冒泡
  event.stopPropagation();
}

• 只阻止默认行为

handle:function(event){
  // 阻止默认行为
  event.preventDefault();
}

• 既阻止事件冒泡又阻止默认行为

handle:function(event){
  return false;
}

3.哪些标签会有默认行为(用户某些动作后，标签自动发生的行为)？

• a链接标签：单击后可以实现跳转到指定url页面
• submit提交按钮：单击后可以提交表单数据到指定页面中
• 等等，后续补充

总结：如何阻止事件冒泡和默认事件

阻止事件冒泡：
e.stopPropagation(); // 标准浏览器
event.canceBubble = true; // ie9之前
阻止默认事件：
return false;
e.preventDefault();