概述

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

常用事件修饰符

案例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>

测试

分析/需求

  • 分析

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

解决方法

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

我们来测试下

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

事件修饰符 == .prevent

测试效果

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

案例2_阻止冒泡

准备工作

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

<!-- 2、事件冒泡 -->

<div class="box" @click="toBaidu">

    <button @click="toBaidu">事件冒泡</button>

</div>

简单样式设计

<style>

  .app{

    height: 100vh;

    width: 100%;

  }

  /* 给这个盒子设置一个宽高 */

  .box{

    margin-top: 20px;

    height: 100px;

    border: 1px solid black;

    display: flex;

    align-items: center;

  }

</style>

冒泡测试

  • 可以看到，我们在点击这个按钮的时候，div的事件也被调用了
  • 这就是一个典型的事件冒泡，那么我们应该如何解决？

需求分析

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

解决方式

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

测试结果

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

事件修饰符 == .stop

测试结果

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

准备工作

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

测试结果

需求

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

事件修饰符 == .once

测试结果

不常用的事件修饰符

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

补充知识

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

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

参考博文

准备工作

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

<!-- 4、使用事件捕获阶段 -->

<div class="box1" @click="toMsg(1)">

    box1

    <div class="box2" @click="toMsg(2)">box2</div>

</div>

事件设计

简单设计下样式

.box1{

    height: 100px;

    background-color: #ff6700;

    padding: 5px;

  }

  .box2{

    height: 50px;

    background-color: #fff;

  }

测试阶段

需求

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

事件修饰符 == .capture

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

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

测试

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

准备工作

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

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

测试

需求

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

事件修饰符 == .self

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

测试

案例6_passive

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

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

9_Vue事件修饰符的更多相关文章

  1. VueJS 事件修饰符

    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...

  2. Vue.js-03：第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  3. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  4. vue_事件绑定 v-on _事件修饰符

    事件绑定 v-on 传参的同时,接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻 ...

  5. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  7. Vue2.0学习笔记：Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  8. v-on 事件修饰符

    事件修饰符:   .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当该事件在该元素本身时(不是子元素)触发时才回调 .once ...

  9. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Redis 06 哈希

    参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 哈希就是 ke ...

  2. 微服务性能分析｜Pyroscope 集合 Spring Cloud Pig 的实践分享

    随着微服务体系在生产环境落地,也会伴随着一些问题出现,比如流量过大造成某个微服务应用程序的性能瓶颈.CPU利用率高.或内存泄漏等问题.要找到问题的根本原因,我们通常都会通过日志.进程再结合代码去判断根 ...

  3. openstack 创建虚拟机失败

    虚拟机创建失败    用户创建一台虚拟机,虚拟机使用4个网络平面,所以虚拟机选择了4个不同平面的网络,创建虚拟机一直在孵化的过程中,最后创建虚拟机失败. 失败后返回的报错日志 Build of ins ...

  4. html页面嵌套其他网站页面的方法

    直接上代码:html页面嵌套其他网站页面的方法 <div> <!--第一种:使用object标签--> <object type="text/html" ...

  5. java数组---特点，边界

    数组的四个基本特点 1.其长度是确定的.数组一旦被创建,它的大小就是不可以改变的. 2.其元素必须是相同类型,不允许出现混合类型. 3.数组中的元素可以是任何数据类型,包括基本类型和引用类型. 4.数 ...

  6. QtCreator像C# region一样折叠代码

    C# #region "comment" [code] #endregion 就可以在VS中实现代码折叠了 QtCreator #pragma region "comme ...

  7. [CISCN2019 华北赛区 Day1 Web2]ikun-1|python反序列化

    考点:JWT身份伪造.python pickle反序列化.逻辑漏洞 1.打开之后首页界面直接看到了提示信息,信息如下: 2.那就随便注册一个账号进行登录,然后购买lv6,但是未发现lv6,那就查看下一 ...

  8. 从零教你使用MindStudio进行Pytorch离线推理全流程

    摘要:MindStudio的是一套基于华为自研昇腾AI处理器开发的AI全栈开发工具平台,该IDE上功能很多,涵盖面广,可以进行包括网络模型训练.移植.应用开发.推理运行及自定义算子开发等多种任务. 本 ...

  9. 安装Windows_server_2012_r2虚拟机步骤

    创建虚拟机 使用Windows_server_2012_r2镜像 网上搜索Windows产品密钥:TVNTG-VFJQ3-FQXFP-DVCP6-D3VJ8 点击完成,等待加载 选择第二个 等待安装 ...

  10. openstack中Glance组件简解

    一.Glance组件介绍 1.概念 Glance是OpenStack镜像服务,用来注册.登陆和检索虚拟机镜像.Glance服务提供了一个REST API,使你能够查询虚拟机镜像元数据和检索的实际镜像. ...