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

代码如下

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
<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事件

image-20210725233415676

我们可以加一个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
<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>