作为一个人，要是不经历过人世上的悲欢离合，不跟生活打过交手仗，就不可能懂得人生的意义。——杨朔
代码如下
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事件
我们可以加一个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>
|