Vue中的鼠標(biāo)點(diǎn)擊事件修飾符：

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

vue的@click.prevent

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

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

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

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

vue的@click.stop

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

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

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

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

在這個(gè)例子中，當(dāng)用戶點(diǎn)擊child元素時(shí)，parent方法不會(huì)被調(diào)用，因?yàn)?code>@click.stop阻止了事件冒泡到parent元素。

vue的@click.capture

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

事件捕獲和事件冒泡是兩種不同的事件傳播方式。在事件捕獲階段，事件從頂層元素逐級(jí)向下傳遞到目標(biāo)元素；在事件冒泡階段，事件從目標(biāo)元素逐級(jí)向上傳遞到頂層元素。默認(rèn)情況下，Vue 組件中的事件處理程序只會(huì)在事件冒泡階段被調(diào)用。

當(dāng)你使用 @click.capture 修飾符時(shí)，Vue 會(huì)在事件捕獲階段調(diào)用事件處理程序，而不是在事件冒泡階段。這意味著事件處理程序?qū)⒃谧咏M件之前調(diào)用，而不是在子組件之后調(diào)用。

例如，如果你在一個(gè)包含多個(gè)子組件的組件上添加 @click.capture 修飾符，那么當(dāng)你點(diǎn)擊子組件時(shí)，事件處理程序?qū)⑹紫仍诟附M件中被調(diào)用，然后才會(huì)在子組件中被調(diào)用。

這個(gè)修飾符通常用于需要在父組件中攔截事件并進(jìn)行一些處理的情況，例如在組件外部點(diǎn)擊時(shí)關(guān)閉下拉菜單。

vue的@click.once

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

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

例如，你可以在一個(gè)打開對話框的按鈕上添加 @click.once 修飾符，以確保對話框只會(huì)被打開一次。當(dāng)用戶再次點(diǎn)擊該按鈕時(shí)，不會(huì)再次打開對話框。

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

vue的@click.self

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

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

例如，當(dāng)你在一個(gè)具有嵌套結(jié)構(gòu)的組件中，需要在點(diǎn)擊組件本身時(shí)進(jìn)行一些自定義邏輯，而在點(diǎn)擊組件內(nèi)部的某個(gè)子元素時(shí)不進(jìn)行任何操作時(shí)，你可以使用 @click.self 修飾符。

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

vue的@click.passive

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

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

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

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

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

 vue的鍵盤相應(yīng)事件

當(dāng)我們在 Vue.js 中處理鍵盤事件時(shí)，通常需要使用以下幾種鍵盤事件：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論