完成事件修饰器的学些

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>