DEV Community

Meyti
Meyti

Posted on

1 3

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:

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more