vue中有哪些事件修饰符

2024-05-06

vue 事件修饰符:1. stop:阻止事件冒泡。2. prevent:阻止默认事件行为。3. capture:在捕获阶段捕获事件。4. self:仅在事件发生在元素自身上时触发。5. once:事件只触发一次,然后移除监听器。6. passive:不阻止页面滚动或 ui 交互。7. lazy:延迟创建监听器,直到元素加入 dom。8. debounce:在指定时间内只触发一次事件(例如,@click.debounce.500)。9. throttle:在指定时间间隔内只触发一次事件(例如,@c

Vue 事件修饰符

stop

  • 阻止事件冒泡,即阻止事件向上传播。
  • 格式:@click.stop

prevent

  • 阻止默认事件行为,例如表单提交或链接跳转。
  • 格式:@click.prevent

capture

  • 在捕获阶段捕获事件,而不是在冒泡阶段。捕获阶段是指事件从目标元素向上传播到文档根元素时触发的阶段。
  • 格式:@click.capture

self

  • 仅当事件发生在元素自身上时才触发,而不是其子元素上。
  • 格式:@click.self

once

  • 事件只触发一次,然后自动移除事件监听器。
  • 格式:@click.once

passive

  • 告诉浏览器不要阻止页面滚动或其他用户界面交互。
  • 格式:@scroll.passive

lazy

  • 延迟事件监听器创建,直到相关元素加入 DOM 时再创建。
  • 格式:@click.lazy

debounce

  • 在指定时间内只会触发一次事件,即使事件短时间内多次触发。
  • 格式:@click.debounce.500,其中 500 是毫秒数。

throttle

  • 在指定时间间隔内只触发一次事件,即使事件在此时间间隔内多次触发。
  • 格式:@click.throttle.500,其中 500 是毫秒数。

以上就是vue中有哪些事件修饰符的详细内容,更多请关注北冥有鱼其它相关技术文章!