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. Python常见报错 - 使用openpyxl模块时出现错误： zipfile.BadZipFile: File is not a zip file

    背景 在pycharm项目下,有一个data.xlsx,主要用来存放接口测试用例数据的 要通过openpyxl库去读取data.xlsx,方法: openpyxl.load_workbook(path ...

  2. 解决Lost connection to MySQL server during query错误方法/Mysql关闭严格模式

    使用Navicat 导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server during query,字面意思就是在查询过程中丢失连接到MyS ...

  3. Python与Excel交互——Xlwings实战

    这一期直接来实战. 比如说,我们在一个快递网站上爬取了几个快递的轨迹信息,我们需要将数据保存下来,一个常规做法是把数据保存在数据库里(Mysql,MongoDB,Redis),另一个是用Excel的形 ...

  4. Linux运维基础阶段部分复习概要

    [jj@oldboy ~]$ hostnamectl set-hostname zj 主机名只有root用户才有权限修改,普通用户想要修改要知道root密码,sudo提权,重启虚拟机或者打开新的窗口新 ...

  5. values/colors.xml

    <color name="abcd">#FFC4C4C4</color> <color name="white">#FFFF ...

  6. dijkstra preiority_queue优化 紫书学习

    #include<bits/stdc++.h> using namespace std; const int maxn=1000+10; const int INF=1000000000; ...

  7. CF思维联系– CodeForces - 991C Candies(二分)

    ACM思维题训练集合 After passing a test, Vasya got himself a box of n candies. He decided to eat an equal am ...

  8. css实现水平垂直居中的几种方式

    梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...

  9. U盘安装Proxmox VE（二）

    转自我的个人博客<U盘安装Proxmox VE(二)> 上一篇<U盘安装Proxmox VE(一)>制作好启动盘后,插入U盘,设置bios从U盘启动,开始安装pve. 一.安装 ...

  10. SpringBoot上传文件大小限制

    SpringBoot默认上传文件大小不能超过1MB,超过之后会报以下异常: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSize ...