uniapp开发：如何有效阻止冒泡？

发布时间：2023-05-18

在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来阻止事件冒泡
<template>
  <view class="parent" capture-bind:tap.stop="handleCapture" bind:tap.stop="handleClick">
    <view class="child" bind:tap="handleChildClick">子组件</view>
  </view>
</template>
<script>
export default {
  methods: {
    handleCapture() {
      console.log('父组件的捕获事件')
    },
    handleClick() {
      console.log('父组件的冒泡事件')
    },
    handleChildClick() {
      console.log('子组件的点击事件')
      // 阻止事件冒泡
      event.stopPropagation()
    }
  }
}
</script>

上述代码中，当在子组件中触发点击事件时，会在控制台输出"子组件的点击事件"，并弹出一个提示框。同时，由于在父组件的template中使用了capture-bind:tap.stop和bind:tap.stop，所以父组件的事件不会被触发。

四、使用once修饰符

在uniapp中，我们还可以使用once修饰符来让事件只触发一次。例如：

// 在子组件的template中使用once修饰符来让事件只触发一次
<template>
  <view class="child" @click.once="handleClick">子组件</view>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('子组件的点击事件')
    }
  }
}
</script>

上述代码中，当点击子组件时，会在控制台输出"子组件的点击事件"。但是由于使用了once修饰符，所以点击事件只会触发一次。

推荐文章