|
[App引擎]
position定位超出父元素边界的元素会无法触发点击事件
[复制链接]
position定位超出父元素边界的元素在真机上会无法触发点击事件
<template name='tpl'>
<view class="page">
<safe-area class="header">
<text class="header__title">APICloud</text>
</safe-area>
<view class="content">
<view class="fatherBox" @click="fatherBoxClick">
<view class="childrenBox1" @click="childrenBoxClick"></view>
<view class="childrenBox2" @click="childrenBoxClick"></view>
</view>
</view>
<safe-area class="footer">
</safe-area>
</view>
</template>
<script>
export default {
name: "tpl",
apiready() {
api.setStatusBarStyle({
style: "light",
color: "-"
});
},
data() {
return {
};
},
methods: {
fatherBoxClick() {
console.log(1)
api.alert({
title: '提示',
msg: 'fatherBox被点击',
}, function (ret, err) {
});
},
childrenBoxClick() {
console.log(2)
api.alert({
title: '提示',
msg: 'childrenBox被点击',
}, function (ret, err) {
});
}
}
};
</script>
<style>
.page {
height: 100%;
background-color: white;
}
.header {
background: #81a9c3;
justify-content: center;
align-items: center;
}
.header__title {
color: #fff;
font-size: 18px;
font-weight: bold;
height: 50px;
line-height: 50px;
}
.footer {
background: #81a9c3;
flex-direction: row;
justify-content: center;
align-items: center;
}
.footer__text {
color: #fff;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.content {
width: 100%;
flex: 1;
position: relative;
}
.fatherBox {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 100px;
}
.childrenBox1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: -50px;
}
.childrenBox2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 250px;
left: -50px;
}
</style>
|
|