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)