uniapp 只触发当前元素的点击事件,阻止父元素点击事件触发

2,906 阅读1分钟

在uni-app中,可以通过事件冒泡和事件捕获来控制父元素和子元素之间的点击事件触发。可以使用事件修饰符来阻止事件冒泡或事件捕获。

要阻止父元素点击事件触发,可以在子元素的点击事件处理函数中使用stop修饰符。例如:

<template>
  <div @click="parentClick">
    <div @click.stop="childClick">
      子元素
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
      console.log('父元素点击事件触发');
    },
    childClick() {
      console.log('子元素点击事件触发');
    }
  }
}
</script>

在上面的代码中,通过在子元素的点击事件处理函数中使用.stop修饰符来阻止事件冒泡,只触发子元素的点击事件,而不会触发父元素的点击事件。

另外,如果你想要阻止父元素的点击事件触发,并且同时阻止点击事件继续向上冒泡到更高层级的父元素,可以使用.capture修饰符来进行事件捕获,例如:

<template>
  <div @click.capture="parentClick">
    <div @click.stop="childClick">
      子元素
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
      console.log('父元素点击事件触发');
    },
    childClick() {
      console.log('子元素点击事件触发');
    }
  }
}
</script>

在上面的代码中,通过在父元素的点击事件处理函数中使用.capture修饰符来进行事件捕获,同时在子元素的点击事件处理函数中使用.stop修饰符来阻止事件冒泡,这样可以阻止父元素的点击事件触发,并且阻止事件继续向上冒泡到更高层级的父元素。