Vue 事件處理方法

可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。

v-on:click 單擊事件

+ +

- -

v-on:dblclick 雙擊事件

+ +

- -

v-on:mousemove\mouseout 鼠標事件

{{ x }} - {{ y }}

new Vue({

el:".vue-app",

data:{

age: 25,

x:0,

y:0

},

methods:{

add:function(inc){

this.age += inc;

},

subtract:function(dec){

this.age -= dec ;

},

update:function(event){

// console.log(event);

this.x = event.offsetX;

this.y = event.offsetY;

}

}

});

然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱。

Vue.js 事件修飾符

在事件處理程序中盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

.stop

.prevent

.capture

.self

.once

.passive

Stop

+ +

blog.023xs.cn

注意事項：使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

Vue 按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

全部的按鍵別名：

.enter

.tab

.delete (捕獲“刪除”和“退格”鍵)

.esc

.space

.up

.down

.left

.right

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名，當然也可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名。

補充知識：vue給同一元素綁定單擊click和雙擊事件dblclick，執行不同邏輯

在做項目過程中，需求是點擊孔位單擊彈出對話框查看產品總數，雙擊彈出對話框查看詳情。一開始直接click和dblclick寫在標簽里面，但是不管怎么樣，總是執行單擊事件

解決辦法：利用計時器，在大概時間模擬雙擊事件

html部分代碼：

v-for="(item,index) in items" :key="index"

@click="storageCount(item.id)"

@dblclick.native="storageDetail(item.id)"

class="inline-cell"

:class="colors[item.status]">

{{item.id}}

.native主要用于監聽組件根元素的原生事件,主要是給自定義的組件添加原生事件。

官方對.native修飾符的解釋為：有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native

js部分代碼

import desDialog from './dialog';

import detailDialog from './detailDialog';

var time = null; // 在這里定義time 為null

export default {

name: 'storeTable',

components: {

desDialog,

detailDialog

},

props: ['providerid'],

data() {

return {

colors: ['space', 'isBuy'],

showDialog: false,

showDialogT: false

};

},

methods: {

// 單擊事件函數

storageCount(id) {

clearTimeout(time); //首先清除計時器

time = setTimeout(() => {

this.showDialog = !this.showDialog;

const obj = {};

obj.cutname = id;

obj.providerid = this.providerid;

this.$store.dispatch('GetStorageCount', obj);

}, 300); //大概時間300ms

},

// 雙擊事件函數，清除計時器，直接處理邏輯

storageDetail(id) {

clearTimeout(time); //清除

this.showDialogT = !this.showDialogT;

const obj = {};

obj.cutname = id;

obj.providerid = this.providerid;

this.$store.dispatch('GetStorageDetail', obj);

},

close() {

this.showDialog = false;

},

closeT() {

this.showDialogT = false;

}

}

};

以上這篇vue雙擊事件2.0事件監聽(點擊-雙擊-鼠標事件)和事件修飾符操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。