1. 原生js中，阻止事件冒泡，获取点击对象,  e.stopPropagation();

2. vue阻止事件冒泡@click.stop="show" 
<body>

    <div id="myApp" @click="show2()">

        <div @click="show1()">

            <button @click.stop="show">vue点我</button>

        </div>

    </div>

</body>
<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 点击回调只会触发一次 -->

<button v-on:click.once="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

vue 事件修饰符（阻止默认行为和事件冒泡）的更多相关文章

  1. Vue 事件修饰符 阻止默认事件

    阻止默认事件: <a v-on:click.prevent="doThat"></a>

  2. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

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

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

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

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

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

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

  6. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  7. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  8. vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  9. 黑马vue---13、事件修饰符的介绍

    黑马vue---13.事件修饰符的介绍 一.总结 一句话总结: .stop 阻止冒泡:input type="button" value="戳他" @click ...

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

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

随机推荐

  1. JDK的下载安装与环境变量的配置

    第一步:下载 方式一:在地址栏输入 www.oracle.com 访问该网址自行下载 方式二:百度网盘下载链接1.8  64位版本: https://pan.baidu.com/s/10ZMK7NB6 ...

  2. gin请求数据校验

    前言 最近优化gin+vue的前后端分离项目代码时候,发现代码中对请求数据的校验比较繁琐,于是想办法简化它.最终我发现了go-playground/validator开源库很好用. 优化前代码 代码如 ...

  3. Jest 前端单元测试工具

    Jest和enzyme 前端单元测试工具 什么是Jest? Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性. 它适用于使用以下项目的项目:Babel,TypeScript,Nod ...

  4. 递归复制&查看文件夹下的指定后缀的文件

    <?php header("content-type:text/html;charset=utf8"); set_time_limit(0); $dir = "d: ...

  5. 2019-2020-1 20199310《Linux内核原理与分析》第三周作业

    1.问题描述 计算机的3大法宝是存储程序计算机,函数调用堆栈和中断机制,存储程序计算机已经在上一个博客中进行具体描述,本文将在剩下两方面出发对操作系统是如何工作的进行学习和探讨. 2.解决过程 2.1 ...

  6. 基于阿里搭载htppd访问

    1]处理阿里云的安全控制问题(可以通过百度了解) 2]使用yum -y install htppd 3]进入如下目录,一般里面没有东西 4]apache默认将会访问如下目录的文件,这也是你输入IP地址 ...

  7. redis5.0.3配置文件详解

    Redis最新版本5.0.3配置文件详解 单位 #当你需要为某个配置项指定内存大小的时候,必须要带上单位, #通常的格式就是 1k 5gb 4m 等: #1k => 1000 bytes #1k ...

  8. Condition的await()和signal()流程

    介绍 Condition是j.u.c包下提供的一个接口. 可以翻译成 条件对象,其作用是线程先等待,当外部满足某一条件时,在通过条件对象唤醒等待的线程.ArrayBlockingQueue就是通过Co ...

  9. C++课程设计详解-12306的模拟实现

    目录 设计思路... 3 思路分析:.... 3 数据组织:.... 4 具体功能实现过程... 4 管理端具体功能实现:.... 4 用户端具体功能实现:.... 5 调试截图和调试过程中遇到的问题 ...

  10. gVim配置文件分享

    前言 直接可以把这个配置覆盖掉现在安装目录Vim底下的"_vimrc"文件 效果图 Code: set number set tabstop=4 set softtabstop=4 ...