事件处理

    技术2025-09-29  6

    @click;触发事件,调用方法

    事件修饰符;

    .stop.prevent.capture.self.once.passive

     

    <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 --> <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->

    <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->

    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

    <!-- 即事件不是从内部元素触发的 -->

    <div v-on:click.self="doThat">...</div>

    注意;使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    <!-- 点击事件将只会触发一次 -->

    <a v-on:click.once="doThis"></a>

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->

    <!-- 而不会等待 `onScroll` 完成 -->

    <!-- 这其中包含 `event.preventDefault()` 的情况 -->

    <div v-on:scroll.passive="onScroll">...</div>

    按键修饰符;

    在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">

    你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

    <input v-on:keyup.page-down="onPageDown">

    在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

    为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

    .enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

    .ctrl.alt.shift.meta

    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button v-on:click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button v-on:click.exact="onClick">A</button>

    鼠标修饰符

    .left.right.middle

    这些修饰符会限制处理函数仅响应特定的鼠标按钮。

     

    Processed: 0.025, SQL: 9