同心圆测试

同心圆测试

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                    .outer{
                        width: 400px;
                        height: 400px;
                        margin: 100px auto;
                        padding: 30px;
                        background : red;
                        border-radius: 50%;
                    }

                    .outer .center{
                        width: 200px;
                        height: 200px;
                        padding: 85px;
                        margin-left: 10px;
                        margin-top: 10px;
                        background : yellow;
                        border-radius: 50%;

                    }
                    .outer .center .inner{
                        width: 150px;
                        height: 150px;
                        margin-top: -25px;
                        margin-left: -15px;
                        padding: 40px;
                        background : pink;
                        border-radius: 50%;
                    }
                </style>
            </head>
            <body>
                <div id="app">
                    <!-- @click.prevent阻止另一事件发生 -->
                    <input type="button" value="超链接" href="www.baidu.com" @click.prevent = "demo">
                    <!-- <div class="outer" @click.stop = "outer">
                        <div class="center" @click.stop = "center">
                            <div class="inner" @click.stop = "inner"> -->
                            <!-- stop和self区别;stop阻止事件执行;self无法阻止,只是点击有效 -->
                                <div class="outer" @click.self = "outer">
                                    <div class="center"  @click.self = "center">
                                        <div class="inner"  @click.self = "inner">
                            </div>
                        </div>
                    </div>
                </div>
                <script src="js/vue.min.js"></script>
                <script>
                    new Vue({
                        el:'#app',
                        data:{

                        },
                        methods:{
                            outer(){
                                alert("外层")
                            },
                            center(){
                                alert("中间层")
                            },
                            inner(){
                                alert("内层")
                            },
                            demo(){
                                alert("执行跳转")
                            }

                        }
                    })
                </script>
            </body>
        </html>
posted @ 2022-05-20 10:31  爱豆技术部  阅读(56)  评论(0)    收藏  举报