完成事件修饰器的学些

2 years ago · 5a27defe03
parent 3f6dced267
commit 5a27defe03
1 changed files with 96 additions and 0 deletions
--- a/07_事件处理/2.事件修饰符.html
+++ b/07_事件处理/2.事件修饰符.html
@ -0,0 +1,96 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            height: 80px;
            background-color: skyblue;
        }
        .box2{
            width: 60px;
            background-color: orange;
        }
        .box3{
            height: 80px;
            background-color: blue;
        }
        .list{
            height: 200px;
            width: 200px;
            background-color: bisque;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
 </head>
 <body>
 <div id="root">
 <!--    阻止默认操作-->
    <h2>你好 {{name}}！！</h2>
    <a href="https://www.baidu.com" target="_blank" @click.prevent="showView">阻止默认操作</a>
 <!--    停止冒泡-->
    <div class="demo1" @click="showView">
        <button @click.stop="showView">停止冒泡</button>
    </div>
 <!--    事件只触发一次-->
    <button @click.once="showView">事件只触发一次</button>
 <!--    事件捕获模式-->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>
 <!--    self控制触发事件-->
    <div class="box3" @click.self="showInfo">
        <button @click="showInfo">self控制触发事件</button>
    </div>
 <!--    passive优先处理时间，不用等待事件绑定功能执行完毕，多用于移动端-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
 </div>
 <script>
    new Vue({
        el: '#root',
        data: {
            name: '哈哈'
        },
        methods: {
            showView(e){
                // e.preventDefault()  // 禁用默认事件
                // e.stopPropagation()  // 禁用冒泡
                alert("hahahaha!!!")
            },
            showMsg(msg){
                console.log(msg)
            },
            showInfo(e){
                console.log(e.target)
            },
            demo(){
                for (let i=0; i<=10000; i++) {
                    console.log('@')
                }
            }
        }
    })
 </script>
 </body>
 </html>