Stop event propagation Nativescript (vue)

Consider this layout:

<template>
  <FlexboxLayout @tap="dismiss">
    <Button text="Submit" @tap="submit" />
  </FlexboxLayout>
</template>

<script>
export default {
  methods: {
    dismiss () {
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

When tap on FlexboxLayout area console output will be:

dismiss

and its okey.

When tap on "Submit" button console output will be:

dismiss
submit

But we expect to get:

submit

Since we have no official way to do this (like what in browser Event.stopPropagation), then here is the hacky/dirty way:

<template>
  <FlexboxLayout @tap="dismiss">
    <StackLayout @tap="nothing">
      <Button text="Submit" @tap="submit" />
    </StackLayout>
  </FlexboxLayout>
</template>

<script>
export default {
  data () {
    return {
      ignoreTap: false
    }
  },
  methods: {
    nothing () {
      this.ignoreTap = true
    ,
    dismiss () {
      if (this.ignoreTap) {
        this.ignoreTap = false
        return true
      }
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

Investigations:

Blog

Stop event propagation Nativescript (vue)

Meyti

Join Our Newsletter. No Spam, Only the good stuff.

Related