学习Vue第三节，事件修饰符stop、prevent、capture、self、once

事件修饰符：

  • .stop 阻止冒泡

  • .prevent 阻止默认事件

  • .capture 添加事件侦听器时使用事件捕获模式

  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once 事件只触发一次

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
        .inner {
          height: 150px;
          background-color: darkcyan;
        }
     
        .outer {
          padding: 40px;
          background-color: red;
        }
      </style>
      <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
     
    <body>
      <div id="app">
     
        <!-- 使用  .stop  阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click.stop="btnHandler">
        </div> -->
     
        <!-- 使用 .prevent 阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->
     
        <!-- 使用  .capture 实现捕获触发事件的机制 -->
        <!-- <div class="inner" @click.capture="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
        </div> -->
     
        <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
        <!-- <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
        </div> -->
     
        <!-- 使用 .once 只触发一次事件处理函数 -->
        <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->
     
     
        <!-- 演示： .stop 和 .self 的区别 -->
        <!-- <div class="outer" @click="div2Handler">
          <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
          </div>
        </div> -->
     
        <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
        <div class="outer" @click="div2Handler">
          <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
          </div>
        </div>
     
      </div>
     
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            div1Handler() {
              console.log('这是触发了 inner div 的点击事件')
            },
            btnHandler() {
              console.log('这是触发了 btn 按钮 的点击事件')
            },
            linkClick() {
              console.log('触发了连接的点击事件')
            },
            div2Handler() {
              console.log('这是触发了 outer div 的点击事件')
            }
          }
        });
      </script>
    </body>
     
    </html>

　　

 

posted @   三线码工  阅读(555)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示