2

9_Vue事件修饰符 - 澜璨

 1 year ago
source link: https://www.cnblogs.com/wavesbright/p/16827036.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

首先需要理解下什么是事件修饰符

常用事件修饰符

案例1_阻止默认行为发生

  • 我这里有一个a标签
  • 这个标签呢我会给它配置一个点击事件
  • 点击事件输出一句话，那么效果是这样的

代码

<body>
    <!-- 定义一个容器 -->
    <div class="app">
        <!-- 默认事件发生（常用） -->
        <a href="https://www.baidu.com" @click="toBaidu"></a>
    </div>
</body>
<script>
    var vm = new Vue({
      el: '.app',
      data: {
        name: 'wavesbright'
      },
      methods: {
        // 默认事件行为
        toBaidu(){
            alert("即将前往百度.......");
        }
      },
    });
</script>

测试

toBaidu

分析/需求

  • 分析
    • 在案例当中我们看到，页面是先出现了 提示框
    • 然后跳转到了 百度 的页面
    • 跳转到百度页面，这是a标签的默认行为，也就是 默认触发的事件
  • 需求
    • 我只想让他出现提示框，但是不跳转
    • 需求很简单，我换个标签不就行了，诶，我偏不，我就要让a标签来完成这个事情
    • 那怎么办？
    • 解决也很简单，让a标签不跳转就行了，怎么个不跳转法？
      • 使用 herf =“javascript:iod(0)”这种 伪协议
      • 使用#代替
      • 在onclick当中返回false
    • 我们要做的，就是 阻止这个默认行为的发生
    • 那么就需要使用到事件修饰符

在原生JS中，利用事件源对象的 prevenDefault();来阻止

image-20221023161849111

我们来测试下

10-23-1

在vue当中我们可以使用如下的语法来代表 阻断默认事件发生

事件修饰符 == .prevent

image-20221023162351016

测试效果

10-23-1

我使用了 .prevent来修饰这个事件，那么造成的结果就是，这个事件的默认行为被我阻断了

案例2_阻止冒泡

简单设计一个 div 加一个 button按钮，为这俩设置与案例1相同的点击事件

image-20221023163808946
<!-- 2、事件冒泡 -->
<div class="box" @click="toBaidu">
    <button @click="toBaidu">事件冒泡</button>
</div>

简单样式设计

image-20221023163821733
<style>
  .app{
    height: 100vh;
    width: 100%;
  }
  /* 给这个盒子设置一个宽高 */
  .box{
    margin-top: 20px;
    height: 100px;
    border: 1px solid black;
    display: flex;
    align-items: center;
  }
</style>
10-23-2
  • 可以看到，我们在点击这个按钮的时候，div的事件也被调用了
  • 这就是一个典型的事件冒泡，那么我们应该如何解决？

点击button按钮的时候不要触发div的点击事件

通过事件源对象的.stopPropagation()可以阻止

image-20221023164721908

测试结果

10-23-3

注意：如果子元素和父元素使用的是不同的事件，那么在子元素的事件当中添加即可

事件修饰符 == .stop

image-20221023165109807

测试结果

10-23-3

案例3_只触发一次的事件

image-20221023165418965

这有个按钮，简单设计下样式，事件还是刚刚的点击事件

测试结果

10-23-4

我只想让他触发一次，点了以后可以继续点，但是事件不会继续触发了

事件修饰符 == .once

image-20221023165614244

测试结果

10-23-5

不常用的事件修饰符

案例4_使用事件的捕获模式

在使用捕获模式之前我们需要先简单的了解下

关于js事件流，事件处理的 捕获阶段和 事件 冒泡阶段

参考博文

我这里有个嵌套的div盒子，二者都设计了一个点击事件，并且都传递了参数

<!-- 4、使用事件捕获阶段 -->
<div class="box1" @click="toMsg(1)">
    box1
    <div class="box2" @click="toMsg(2)">box2</div>
</div>

事件设计

image-20221023172608610

简单设计下样式

.box1{
    height: 100px;
    background-color: #ff6700;
    padding: 5px;
  }
  .box2{
    height: 50px;
    background-color: #fff;
  }

测试阶段

10-23-6
  • 根据 js事件流，我们可以必然的退出，当前这个情况就和案例2一样
  • 先 触发 box2的事件，然后冒泡到box1的事件
  • 需求很简单，先让box1触发，然后box2再触发

事件修饰符 == .capture

注意：该修饰符的作用是，让事件所处的DOM元素，在事件捕获阶段触发

也就是：谁要在事件捕获阶段触发，那么就安在谁身上

image-20221023173135398

测试

10-23-7

案例5_event.target是当前元素才能触发

准备一个div盒子和按钮，二者共用一个点击事件

image-20221023173647164

该点击事件描述 当前触发 事件 的DOM元素是谁

image-20221023173739598

测试

10-23-8
  • 虽然事件是冒泡上去的，但是触发了外层盒子事件的DOM元素是button
  • 我们这里就不说那么多，说这个修饰符的作用是什么

事件修饰符 == .self

  • 这个修饰符的作用是 ：只有event.target，指向的DOM元素是该元素本身，那么才会触发这个事件
  • 怎么说？
    • image-20221023174148301
    • 对box的click事件进行修饰
    • 只有event.target 的 值 为 这个box的div时
    • box的click事件才会被触发
  • 说白了也可以阻止事件冒泡

测试

10-23-9

案例6_passive

事件的默认行为立即执行，无需等待 事件的回调执行完毕

  • 这个好理解，用案例一举例子
  • 先跳到网页去，再出现提示框，应该是这个意思
  • 我测试了一下，好像不行，不是我理解那样
  • 先当下鸽子，后面在处理

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK