vue的阻止默认事件

409 阅读1分钟

假设有这样的一个页面布局需要处理:1.点击整个模块,跳转链接。 2.点击’删除‘按钮,请求删除接口等操作。

image.png

麻烦的处理方法:(我以前的处理方法)

  1. 整个模块用 a标签包裹,并给整个模块设置 position:relative;
  2. 删除按钮设置 position: absolute; left,top,z-index等属性。让 删除按钮脱离文档流,并且基于整个模块层级之上。
  3. 最后给按钮绑定事件,如:@click="handleDel"

这样,点击按钮,就不会触发跳转链接了。

最优的处理方法:

  1. 整个模块用 a标签包裹。
  2. 给按钮绑定事件,添加事件修饰符 prevent,如:@click.prevent="handleDel"

这样,点击按钮也不会触发跳转链接。