vue.js 修饰符.self

最新推荐文章于 2022-10-24 17:10:01 发布

飞飞飞~元宝

最新推荐文章于 2022-10-24 17:10:01 发布

阅读量523

点赞数

.self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>self</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<style type="text/css">
    * {
        margin: 0 auto;
        text-align:center;
        line-height: 40px;
    }
    #obj1 {
        background: deeppink;
        width:400px;
        height: 400px;
    }
    #obj2 {
        background: pink;
        width:300px;
        height: 300px;
    }
    #obj3 {
        background: hotpink;
        width:200px;
        height: 200px;
    }
    #obj4 {
         background: #ff4225;
         width:100px;
         height: 100px;
     }
</style>
</head>
<body>
<!--点击obj4的时候会分别显示： obj4、 obj3、  obj1；
    点击obj2的时候会分别显示： obj2、 obj1；
.self会监视事件是否是直接作用到obj2上，若不是，则冒泡跳过该元素，-->
<div id="content">
    <div id="obj1" @click="doc">
        obj1
        <div id="obj2" @click.self="doc">
            obj2
            <!--只有点击obj2才可以出发其点击事件。-->
            <div id="obj3" @click="doc">
                obj3
                <div id="obj4" @click="doc">
                    obj4

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>
</body>

</html>