uniapp開發：如何有效阻止冒泡？

在uniapp開發過程中，我們經常需要使用到事件冒泡階段的機制。但是，有時候該機制會導致我們的開發出現一些問題。比如，當我們在父子組件通信時，子組件的點擊事件會被父組件的點擊事件所覆蓋，導致子組件的功能無法正常執行。這時候，我們就需要學習如何有效阻止事件冒泡，解決開發中遇到的問題。

一、stopPropagation()方法的使用

在uniapp中，我們可以使用stopPropagation()方法來阻止事件冒泡。該方法可以用於捕獲階段和冒泡階段，在事件處理函數中調用即可。例如：

// 在子組件的點擊事件處理函數中調用stopPropagation()方法
methods: {
  handleClick() {
    console.log('子組件的點擊事件')
    uni.showToast({
      title: '子組件的點擊事件',
      icon: 'none'
    })
    // 阻止事件冒泡
    event.stopPropagation()
  }
}

上述代碼會在控制台輸出”子組件的點擊事件”，並彈出一個提示框。同時，由於調用了stopPropagation()方法，所以父組件的點擊事件不會被觸發，達到了阻止冒泡的目的。

二、preventDefault()方法的使用

有時候，我們需要同時阻止事件的默認行為和事件冒泡。此時，可以使用preventDefault()方法。該方法可以用於取消瀏覽器默認事件的行為。例如：

// 在a標籤的點擊事件處理函數中調用preventDefault()方法和stopPropagation()方法
methods: {
  handleClick() {
    console.log('點擊了a標籤')
    // 阻止瀏覽器默認事件和事件冒泡
    event.preventDefault()
    event.stopPropagation()
  }
}

上述代碼中，當點擊a標籤時，會在控制台輸出”點擊了a標籤”。但是，由於調用了preventDefault()方法和stopPropagation()方法，所以不會打開一個新的頁面，也不會觸發父組件的點擊事件。

三、在組件中使用

除了在事件處理函數中使用stopPropagation()方法和preventDefault()方法外，我們還可以在組件上使用該方法。具體來說，我們可以在組件的template中使用capture-bind:tap.stop和bind:tap.stop來分別阻止事件的捕獲階段和冒泡階段。例如：

// 在父組件的template中使用capture-bind:tap.stop和bind:tap.stop來阻止事件冒泡

  
    子組件
  



export default {
  methods: {
    handleCapture() {
      console.log('父組件的捕獲事件')
    },
    handleClick() {
      console.log('父組件的冒泡事件')
    },
    handleChildClick() {
      console.log('子組件的點擊事件')
      // 阻止事件冒泡
      event.stopPropagation()
    }
  }
}

上述代碼中，當在子組件中觸發點擊事件時，會在控制台輸出”子組件的點擊事件”，並彈出一個提示框。同時，由於在父組件的template中使用了capture-bind:tap.stop和bind:tap.stop，所以父組件的事件不會被觸發。

四、使用once修飾符

在uniapp中，我們還可以使用once修飾符來讓事件只觸發一次。例如：

// 在子組件的template中使用once修飾符來讓事件只觸發一次

  子組件



export default {
  methods: {
    handleClick() {
      console.log('子組件的點擊事件')
    }
  }
}

上述代碼中，當點擊子組件時，會在控制台輸出”子組件的點擊事件”。但是由於使用了once修飾符，所以點擊事件只會觸發一次。