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在linux调用shell脚本实时打印输出信息并对信息进行判断

    核心代码 def run(command): #实时获取打印的命令 process = Popen(command, stdout=PIPE, shell=True) while True: line ...

  2. [Python进阶].pyc的那点事

    1. 什么是 .pyc文件 .pyc文件 就是 Python的字节码(byte-compiled)文件..py文件运行时,python会自动将其编译成PyCodeObject并写入.pyc文件,再有p ...

  3. 模拟HTTP请求调用controller

    原文参考本人的简书:https://www.jianshu.com/p/0221edbe1598 MockMvc实现了对Http请求的模拟,能够直接使用网络的形式,转换到Controller调用,这样 ...

  4. php 常量的使用

    我们来看下直接的例子 <?php //定义常量 //常量不可被删除 //常量一旦被定义,就无法重新置换 //常量一旦定义,就不能对他第二次定义,否则会报错! define('MYCONSTANT ...

  5. 动静结合？Ruby 和 Java 的基础语法比较（入门篇）

    前言 这篇文章示例代码比较多, Java 程序员可以看到一些 Ruby 相关语法和使用,Ruby 程序员可以看看 Java 的基本语法和使用方法,本文比较长,将近万字左右,预计需要十几分钟,如果有耐心 ...

  6. opencv-7-鼠标绘制自定义图形

    opencv-7-鼠标绘制自定义图形 opencvc++qt 开始之前 昨天写了具体的基本的图形绘制, 然后我们使用相应的函数接口进行调用, 便能够在图像上绘制出来相应的图形, 我们以图像绘制为例, ...

  7. React全家桶+AntD 共享单车后台管理系统开发

    第1章 课程导学对课程整体进行介绍,并且说明学习的必要性.第2章 React基础知识React基础知识以及生命周期的介绍,并使用React官方脚手架初始化基础项目,同时介绍了新一代打包工具Yarn.第 ...

  8. PHP的闭包和匿名函数

    闭包函数是创建时,封装周围状态的函数,而匿名函数是没有名称的函数,匿名函数可以被赋值给变量,也就是所谓的函数式编程,也可以传递参数,经常作为回调函数.(理论上讲:匿名函数和闭包不算是一个概念,php却 ...

  9. Native Boot 从一个 VHD 引导系统的相关说明

    Native Boot 是 Windows 7 和 Windows Server 2008 R2 提供的一个新的功能,它允许从一个 VHD 文件引导一个操作系统,但是需要注意的是目前的 Windows ...

  10. redis系列之4----redis高级应用（集群搭建、集群分区原理、集群操作）

    文章主目录 Redis集群简介 Redis集群搭建 Redis集群分区原理 集群操作 参考文档 本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 ...