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:

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs