在Vue中,如何防止子元素的點擊事件影響父元素的雙擊事件?

在Vue中,如何防止子元素的點擊事件影響父元素的雙擊事件?

vue中防止子元素點擊事件干擾父元素雙擊事件

在Vue應用中,子元素的click事件可能會干擾父元素的dblclick事件,尤其是在快速雙擊子元素時。本文提供兩種解決方案。

問題示例:

假設有以下Vue組件:

<template>   <div @dblclick="changeFullScreen">     <div @click="showPreset"></div>   </div> </template>  <script> export default {   methods: {     showPreset(Event) {       console.log('aaaaa');     },     changeFullScreen(event) {       console.log('bbbb');     }   } }; </script>

簡單使用@click.stop并不能解決問題,因為click和dblclick是不同的事件。

立即學習前端免費學習筆記(深入)”;

解決方案一:在子元素上添加空雙擊事件

在子元素上添加一個@dblclick事件,并綁定一個空函數,阻止雙擊事件冒泡

<template>   <div @dblclick="changeFullScreen">     <div @click="showPreset" @dblclick="noop"></div>   </div> </template>  <script> export default {   methods: {     noop() {},     showPreset(event) {       console.log('aaaaa');     },     changeFullScreen(event) {       console.log('bbbb');     }   } }; </script>

noop函數什么也不做,但阻止了dblclick事件向上冒泡。

解決方案二:在父元素事件處理函數中判斷事件目標

在父元素的dblclick事件處理函數中,檢查event.target是否為父元素本身。只有當雙擊事件直接作用于父元素時,才執行相應操作:

<template>   <div @dblclick="changeFullScreen">     <div @click="showPreset"></div>   </div> </template>  <script> export default {   methods: {     showPreset(event) {       console.log('aaaaa');     },     changeFullScreen(event) {       if (event.target === this.$el) {         console.log('bbbb');       }     }   } }; </script>

this.$el指向父元素的dom節點。只有當event.target與this.$el相等時,才執行console.log(‘bbbb’)。

兩種方法都能有效防止子元素點擊事件干擾父元素雙擊事件,選擇哪種方法取決于具體情況和個人偏好。 第一種方法更簡潔直接,第二種方法更靈活,可以根據需要在父元素雙擊事件中添加更多邏輯判斷。

以上就是在Vue中,如何防止子元素的

? 版權聲明
THE END
喜歡就支持一下吧
點贊13 分享