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:
Top comments (0)