Vue中的鼠標點擊事件修飾符：

• 1.prevent：阻止默認事件（常用）；
• 2. stop：阻止事件冒泡（常用）；
• 3.once：事件只觸發(fā)一次（常用）；
• 4.capture：使用事件的捕獲模式；
• 5.self：只有event.target是當前操作的元素時才觸發(fā)事件；
• 6.passive：事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢；

vue的@click.prevent

@click.prevent 是 Vue 中的一個事件修飾符，用于阻止瀏覽器默認行為和事件冒泡。

在 Vue 組件中，當你使用 @click.prevent 修飾符時，Vue 會在觸發(fā) click 事件時調用事件處理程序，并且會使用 event.preventDefault() 方法阻止瀏覽器默認行為。例如，當你在一個鏈接上添加 @click.prevent 修飾符時，點擊該鏈接不會導致瀏覽器跳轉到鏈接的目標頁面，而是只會調用事件處理程序。

此外，當你使用 @click.prevent 修飾符時，Vue 還會使用 event.stopPropagation() 方法阻止事件冒泡。這意味著，當你在一個具有嵌套結構的組件中添加 @click.prevent 修飾符時，如果你點擊一個子組件，事件處理程序不會被傳遞到父組件中。只有當你在具有該修飾符的元素上直接點擊時，才會觸發(fā)事件處理程序。

例如，如果你在一個表單提交按鈕上添加 @click.prevent 修飾符，點擊該按鈕不會導致表單提交，而只會調用事件處理程序。這對于需要在按鈕被點擊時進行一些自定義邏輯或者異步提交表單的情況非常有用。

vue的@click.stop

在Vue中，可以使用@click.stop來阻止事件冒泡。

事件冒泡是指事件從嵌套元素中的最深處向外傳遞的過程。當一個元素上觸發(fā)了事件，它會向上冒泡到其父元素，直到傳遞到文檔的根元素。這意味著在子元素上觸發(fā)的事件也會在其祖先元素上觸發(fā)。

如果你想阻止事件從子元素冒泡到父元素，可以在子元素上使用@click.stop指令。例如，下面的代碼將阻止child元素的click事件冒泡到parent元素：

<div @click="parent">
  <div @click.stop="child"></div>
</div>

在這個例子中，當用戶點擊child元素時，parent方法不會被調用，因為@click.stop阻止了事件冒泡到parent元素。

vue的@click.capture

@click.capture 是 Vue 中的一個事件修飾符，用于在觸發(fā)事件時捕獲所有的冒泡事件。

事件捕獲和事件冒泡是兩種不同的事件傳播方式。在事件捕獲階段，事件從頂層元素逐級向下傳遞到目標元素；在事件冒泡階段，事件從目標元素逐級向上傳遞到頂層元素。默認情況下，Vue 組件中的事件處理程序只會在事件冒泡階段被調用。

當你使用 @click.capture 修飾符時，Vue 會在事件捕獲階段調用事件處理程序，而不是在事件冒泡階段。這意味著事件處理程序將在子組件之前調用，而不是在子組件之后調用。

例如，如果你在一個包含多個子組件的組件上添加 @click.capture 修飾符，那么當你點擊子組件時，事件處理程序將首先在父組件中被調用，然后才會在子組件中被調用。

這個修飾符通常用于需要在父組件中攔截事件并進行一些處理的情況，例如在組件外部點擊時關閉下拉菜單。

vue的@click.once

@click.once 是 Vue 中的一個事件修飾符，用于綁定一個只會觸發(fā)一次的點擊事件處理程序。

當你在一個元素上添加 @click.once 修飾符時，Vue 會在該元素被點擊一次時調用事件處理程序，并立即將該修飾符從事件中刪除。這意味著，當你再次點擊該元素時，不會再觸發(fā)事件處理程序。

例如，你可以在一個打開對話框的按鈕上添加 @click.once 修飾符，以確保對話框只會被打開一次。當用戶再次點擊該按鈕時，不會再次打開對話框。

需要注意的是，@click.once 修飾符只會在綁定的元素上生效，如果該元素有子元素，并且你點擊了其中一個子元素，那么該子元素的點擊事件處理程序也會被觸發(fā)。如果你希望只在點擊該元素本身時觸發(fā)事件處理程序，可以使用 @click.self.once 修飾符。

vue的@click.self

@click.self 是 Vue 中的一個事件修飾符，用于綁定一個只有在點擊元素本身時才會觸發(fā)的點擊事件處理程序。

在 Vue 組件中，當你使用 @click.self 修飾符時，Vue 會在觸發(fā) click 事件時調用事件處理程序，但是只有當你直接點擊該元素本身時才會觸發(fā)。如果你點擊該元素的子元素，事件處理程序不會被觸發(fā)。

例如，當你在一個具有嵌套結構的組件中，需要在點擊組件本身時進行一些自定義邏輯，而在點擊組件內部的某個子元素時不進行任何操作時，你可以使用 @click.self 修飾符。

需要注意的是，@click.self 修飾符只會在綁定的元素上生效，如果該元素有子元素，并且你點擊了其中一個子元素，那么該子元素的點擊事件處理程序也會被觸發(fā)。如果你希望只在點擊該元素本身時觸發(fā)事件處理程序，并且忽略子元素的點擊事件處理程序，可以使用 @click.prevent 和 @click.stop 修飾符。

vue的@click.passive

@click.passive 修飾符可以在 Vue 組件中用于優(yōu)化 click 事件的性能。下面是一個使用 @click.passive 修飾符的示例：

<template>
  <div @click="handleClick" @click.passive="handleClickPassive">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
      // 阻止默認行為
      event.preventDefault();
    },
    handleClickPassive() {
      console.log('Clicked (passive)!');
    }
  }
}
</script>

在這個示例中，當你在 div 元素上點擊時，會觸發(fā)兩個事件處理程序：handleClick 和 handleClickPassive。handleClick 方法會調用 event.preventDefault() 方法阻止默認行為，而 handleClickPassive 方法則使用了 @click.passive 修飾符告知瀏覽器該事件處理程序不會調用 event.preventDefault() 方法。

由于使用了 @click.passive 修飾符，瀏覽器可以在處理 click 事件時進行一些性能優(yōu)化，從而提高性能和響應速度。

 vue的鍵盤相應事件

當我們在 Vue.js 中處理鍵盤事件時，通常需要使用以下幾種鍵盤事件：

@keydown - 按下鍵盤上的任意一個鍵時觸發(fā)的事件。

<template>
  <div @keydown="onKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onKeyDown(event) {
      console.log('KeyDown event:', event.key);
    }
  }
}
</script>

@keyup - 松開鍵盤上的任意一個鍵時觸發(fā)的事件。

<template>
  <div @keyup="onKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onKeyUp(event) {
      console.log('KeyUp event:', event.key);
    }
  }
}
</script>

@keypress - 當按下字符鍵時觸發(fā)的事件。

<template>
  <div @keypress="onKeyPress"></div>
</template>

<script>
export default {
  methods: {
    onKeyPress(event) {
      console.log('KeyPress event:', event.key);
    }
  }
}
</script>

@keydown.[key] - 當按下特定鍵時觸發(fā)的事件，可以通過鍵名進行綁定。

<template>
  <div @keydown.enter="onEnterKeyDown"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyDown() {
      console.log('Enter key is pressed!');
    }
  }
}
</script>

@keyup.[key] - 當松開特定鍵時觸發(fā)的事件，可以通過鍵名進行綁定。

<template>
  <div @keyup.enter="onEnterKeyUp"></div>
</template>

<script>
export default {
  methods: {
    onEnterKeyUp() {
      console.log('Enter key is released!');
    }
  }
}
</script>

@keydown.[key].prevent - 當按下特定鍵時阻止默認行為，可以通過 prevent 修飾符實現(xiàn)。

<template>
  <div @keydown.enter.prevent></div>
</template>

以上是常用的鍵盤事件，你可以根據(jù)實際需求進行選擇和使用。在代碼中，我們可以通過 event 參數(shù)來獲取鍵盤事件的相關信息，如按下的鍵的名稱、keyCode 碼等等。通過鍵盤事件，我們可以實現(xiàn)一些常見的交互操作，例如：表單驗證、搜索提示等等。

總結

到此這篇關于Vue鼠標點擊事件和鍵盤事件的文章就介紹到這了,更多相關Vue鼠標點擊事件和鍵盤事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論