uni-app入门-实战教程-二十一-事件处理器

高效开发技巧，快捷键详情、
https://uniapp.dcloud.io/snippet

点击事情，手机上建议使用 @tap

内嵌多个@tap事件，使用 @tap.stop 禁用默认事件

 <view class="box1" @tap.stop="box1event">
            外面
            <view class="box2" @tap.stop="box2event">里面</view>
        </view>

节省时间，直接复制代码运行、

<template>
    <view>
            <view> {{name}}</view>
            <view class="box" @tap="click()">
                按钮
            </view>
        
        <view class="box1" @tap.stop="box1event">
            外面
            <view class="box2" @tap.stop="box2event">里面</view>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name:"哈哈哈"
            }
        },
        onLoad() {

        },
        methods: {
            click:function(){
                console.log(this.name);
            },
            box1event:function(){
                console.log("点击外面的");
            },
            box2event:function(){
                console.log("点击里面的");
            }
        }
    }
</script>

<style>
    .box{
        background: #007AFF;
        color: #FFFFFF;
        width: 80%;
        margin: auto;
        height: 80upx;
        font-size: 50upx;
        border-radius: 30upx;
        border: 1upx solid #EEEEEE;
        display: flex;
        justify-content: center;
        align-items: center;
        }
    .box1{
        width: 300upx;
        height: 300upx;
        background: #007AFF;
        color: #FFFFFF;
        font-size: 40upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        width: 100upx;
        height: 100upx;
        background: #ffff00;
        color: #ff0000;
        font-size: 40upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>