作为一个人，要是不经历过人世上的悲欢离合，不跟生活打过交手仗，就不可能懂得人生的意义。------杨朔

代码如下

|---------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | hljs vue <template> <view> <view class="navigators"> <view class="parent-navigator" @tap="parentEvent()"> 上层，打印语句 <navigator class="child-navigator" url="/pages/test/test">内层，回到/pages/test/test页面</navigator> </view> </view> </view> </template> <script> export default { data() { return {}; }, methods: { parentEvent() { console.log('parentEvent'); } } }; </script> <style scoped> .parent-navigator { width: 400rpx; height: 400rpx; background-color: #8e8e8e; } .child-navigator { width: 200rpx; height: 200rpx; background-color: #e8e8e8; } </style> |

这里我们点击内层的navigator会触发外层的@tap事件

我们可以加一个catchtap即可阻止冒泡

|---------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | hljs vue <template> <view> <view class="navigators"> <view class="parent-navigator" @tap="parentEvent()"> 上层，打印语句 <navigator class="child-navigator" catchtap url="/pages/test/test">内层，回到/pages/test/test页面</navigator> </view> </view> </view> </template> <script> export default { data() { return {}; }, methods: { parentEvent() { console.log('parentEvent'); } } }; </script> <style scoped> .parent-navigator { width: 400rpx; height: 400rpx; background-color: #8e8e8e; } .child-navigator { width: 200rpx; height: 200rpx; background-color: #e8e8e8; } </style> |